为了账号安全,请及时绑定邮箱和手机立即绑定

vue的v-for之后的click事件

vue的v-for之后的click事件

当年话下 2019-03-22 23:15:00
问题描述用vue的for循环,写了一些div,但是我需要在绑定的div的子/孙节点上面添加click事件,我怎么取得当前的这个对象,或则怎么实现点击哪个 哪个变色的效果,而不是全部!!! 我已经写了一个简单的页面,请帮忙调试!<!DOCTYPE html><html><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <meta http-equiv="X-UA-Compatible" content="ie=edge">    <title>Document</title>    <script src="https://cdn.bootcss.com/vue/2.6.9/vue.min.js"></script>    <style>        * {            padding: 0;            margin: 0;        }        .boxlist {            width: 100%;            height: auto;            border: 1px solid grey;            padding: 20px;        }        .box {            height: 100px;            width: 100%;            border: 1px solid green;        }        .showbox {            width: 100%;            height: 50px;            background-color: bisque;        }        .editbox {            width: 100%;            height: 50px;            background-color: chartreuse;        }    </style></head><body>    <div class="boxlist">        <div class="box" v-for="item in list">            <div class="showbox" v-if="showbox">                <div class="title"></div>                <div class="header">header</div>                <input type="button" value="编辑" @click="showval" />            </div>            <div class="editbox" v-else>                <div class="title">111</div>                <input type="button" value="保存" @click="hideval" />            </div>        </div>    </div>    <script>        new Vue({            el: ".boxlist",            data: {                list: [1, 2, 3, 4, 5],                showbox: true            },            methods: {                showval: function () {                    this.showbox = false                },                hideval: function () {                    this.showbox = true                }            }        })    </script></body></html>
查看完整描述

1 回答

  • 1 回答
  • 0 关注
  • 1677 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信