v-for循环切换子元素显示隐藏

最新推荐文章于 2023-11-16 16:56:31 发布

原创最新推荐文章于 2023-11-16 16:56:31 发布 · 290 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #前端 #javascript

本文介绍了一个使用Vue.js实现的列表项点击切换效果。通过v-for指令遍历列表，并结合v-show条件渲染来实现列表项的显示与隐藏。代码中还包括了用于控制显示隐藏状态的数据属性及对应的处理方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

话不多说，上代码

 .vue文件
  <div v-for="(i, index) in List" :key="index">
             <span @click="handle(i, index)"
              ></span>
                <span v-show="activeIndex === modelIndex" >-</span>
                
js文件
data(){returnactiveIndex: -1, // 初始化点击的索引值}
methods: {
    handle=(i, index) {
    //实现显示隐藏切换
      if (this.activeIndex == -1) {
        this.activeIndex = index;
      } else {
        this.activeIndex = -1;
      }
    },