vue中控制v-for循环出来的某一个列表项的显示隐藏切换
第一种方法:通过给每条数据添加字段的方法给每一项点击的地方添加一个点击事件,把当前的列表项作为参数传递过去在methods里面写点击事件:首先判断列表项有没有这个字段,没有的话就通过this.$set添加字段,然后进行取反,有这个字段的话直接取反。this.$set(你要添加数据的数组或对象, '字段名称', 字段值)最后通过v-show控制代码块的显示隐藏...
·
第一种方法:通过给每条数据添加字段的方法
给每一项点击的地方添加一个点击事件,把当前的列表项作为参数传递过去
在methods里面写点击事件:
首先判断列表项有没有这个字段,没有的话就通过this.$set添加字段,然后进行取反,有这个字段的话直接取反。
this.$set(你要添加数据的数组或对象, '字段名称', 字段值)
最后通过v-show控制代码块的显示隐藏
第二种方法:在data里面设置一个属性
在data里面设置一个属性thisIndex,给一个初始值为-1或者null:
写点击事件的时候,将当前项的下标作为参数传过去:
在点击事件中,当thisIndex为空时则将当前项的下标赋值给它,当不为空时则将thisIndex清空即可:
但是这种方法有个bug,只能控制一个元素的显示隐藏,thisIndex毕竟还是全局的,当要同时展开两个时就会出问题,所以最好还是使用第一种给数据加字段的方法。
更多推荐
已为社区贡献2条内容
所有评论(0)