正文
vue里面如何让v-for循环出来的列表里面的列表click事件只对当前列表有效
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
<li @click="show">
<span>1</span>
</li> <li @click="show">
<span>1</span>
</li> <li @click="show">
<span>1</span>
</li>
li点击只让当前的 li 下面的span 隐藏方法一：用vue就尽量遵从数据驱动的想法，实现这个的方法很多，但是尽量不要直接去操作dom。
<div id="app">
<ul>
<li v-for="list in lists" @click="show($index)">
<span v-show="$index !== i">{{ list }}</span>
</li>
</ul>
</div>
<script>
new Vue({
el: '#app',
data: {
lists: [1, 1, 1],
i: -1
},
methods: {
show (index) {
this.i = index
}
}
})
</script>
方法2：
<ul id="app">
<li v-for='item in items' @click="toggle(item)">
<span v-if='item.show'>{{item.content}}</span>
</li>
</ul>
new Vue({
el: '#app',
data: function() {
return {
items: [{
content: '1 item',
show: true
}, {
content: '2 item',
show: true
}, {
content: '3 item',
show: true
}]
}
},
methods: {
toggle: function(item) {
item.show = !item.show;
}
}
})
