当前位置:   article > 正文

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

vue 循环出来的怎么单个改变

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

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

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

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

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)" />
  • 1
  • 2

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

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

4. 事件函数

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

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)" />
  • 1

2. 要现实隐藏的部分

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

3. data 部分

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

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') // 状态修改为隐藏
      }
    },
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12

5. style 样式

.none{
	display: none;
}
.block{
    display: block;
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/AllinToyou/article/detail/76795
推荐阅读
相关标签
  

闽ICP备14008679号