vue中使用v-for循环出来的数据,如何单独控制显示隐藏

vue中使用v-for循环出来的数据,如何单独控制显示隐藏

一. 第一种方法(修改数据)

1. 给要循环的列表每一个列表的item 里拼接一个字段

列表.forEach(item => {
	item.isShow = false // isShow 就是控制内容隐藏消失的开关
})

2. 绑定点击事件

<van-icon v-if="item.isShow" name="arrow-up" ref="icon" @click="itemShow(item.isShow,index)" />
<van-icon v-if="!item.isShow" name="arrow-down" ref="icon" @click="itemShow(item.isShow,index)" />

3. 要控制隐藏显示的部分

<div v-if="item.isShow" class="onOff">123</div>

4. 事件函数

itemShow(itemIsShow,index) {
     console.log('itemIsShow:',itemIsShow)
     console.log('index:',index)
     列表[index].isShow = !itemIsShow
     this.$forceUpdate(); // 加这个是因为有时候点击页面会没反应
},

PS:$forceUpdate()迫使vue实例重新（rander）渲染虚拟DOM，注意并不是重新加载组件。

结合vue的生命周期，调用$forceUpdate后只会触发beforeUpdate和updated这两个钩子函数，不会触发其他的钩子函数。

它仅仅影响实例本身和插入插槽内容的子组件，而不是所有子组件。

但是这种做法并不推荐，官方说如果你现在的场景需要用forceUpdate方法 ,那么99%是你的操作有问题，如上data里不显示声明对象的属性，之后添加属性时正确的做法时用 vm.$set() 方法，所以forceUpdate请慎用。

this.$forceUpdate(); 强制刷新
同等效果的：window.location.reload()

二. 第二种方法(修改样式)

1.标签上的事件

<van-icon name="arrow-down" ref="icon" @click="onOffFUNC(onOff, index)" />

2. 要现实隐藏的部分

<div class="onOff none" ref="onOff">123</div>

3. data 部分

onOff: false // 这个是为了区分现在是隐藏状态还是展开状态

4.事件函数

onOffFUNC(bool, index) {
      this.onOff = !bool
      if (this.onOff) {
        this.$refs.icon[index].classList.remove('van-icon-arrow-down') // 去除下箭头样式
        this.$refs.icon[index].classList.add('van-icon-arrow-up') // 添加上箭头样式
        this.$refs.onOff[index].classList.add('block') // 状态修改为展开
      } else {
        this.$refs.icon[index].classList.remove('van-icon-arrow-up') // 去除上箭头样式
        this.$refs.icon[index].classList.add('van-icon-arrow-down') // 添加下箭头样式
        this.$refs.onOff[index].classList.remove('block') // 状态修改为隐藏
      }
    },

5. style 样式

.none{
	display: none;
}
.block{
    display: block;
}