vue中控制v-for循环出来的某一个列表项的显示隐藏切换

1

原文链接： http://www.freesion.com/article/343322532/

版权

第一种方法：通过给每条数据添加字段的方法

给每一项点击的地方添加一个点击事件，把当前的列表项作为参数传递过去

在methods里面写点击事件：

首先判断列表项有没有这个字段，没有的话就通过this.$set添加字段，然后进行取反，有这个字段的话直接取反。

this.$set(你要添加数据的数组或对象, '字段名称', 字段值)
     
     

最后通过v-show控制代码块的显示隐藏

 

第二种方法：在data里面设置一个属性

在data里面设置一个属性thisIndex，给一个初始值为-1或者null:

写点击事件的时候，将当前项的下标作为参数传过去：

在点击事件中，当thisIndex为空时则将当前项的下标赋值给它，当不为空时则将thisIndex清空即可：

但是这种方法有个bug，只能控制一个元素的显示隐藏，thisIndex毕竟还是全局的，当要同时展开两个时就会出问题，所以最好还是使用第一种给数据加字段的方法。