vue的v-for之后的click事件
问题描述
用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回答
随时随地看视频慕课网APP
相关分类
JavaScript