使用Vue中 v-for循环列表控制按钮隐藏显示功能

2020-06-14 06:10:22易采站长站整理

}
})
</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;
}
}
})

总结

以上所述是小编给大家介绍的使用Vue中 v-for循环列表控制按钮隐藏显示功能,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!