• 注册
当前位置:1313e > vue >正文

vue里面如何让v-for循环出来的列表里面的列表click事件只对当前列表有效


<
li @click="show"><span>1span> li><li @click="show"><span>1span> li><li @click="show"><span>1span> 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;}}
})

 

转载于:https://www.cnblogs.com/tangwanzun/p/7828317.html

本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 162202241@qq.com 举报,一经查实,本站将立刻删除。

最新评论

欢迎您发表评论:

请登录之后再进行评论

登录