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

2024年4月30日 415次阅读 来源: 陈不水

自己搜了点,又进行了改进

html部分

     <div v-for="(item, index) in data" :key="index">
       <div @click="isShow">
         <h5>{ { item.name}}</h5>
       </div>
     </div>

js部分

    isShow(event) { 
      let _el = event.currentTarget
      //判断当前节点的类名是否存在active
      if (_el.getAttribute('class') === 'active') { 		
        _el.setAttribute('class', '')			
      } else { 
        _el.setAttribute('class', 'active')		//如果不存在添加active属性,隐藏该节点
      }
    }

css部分

.active{ 
	display:none;
}
以上内容是网上微改，点击之后隐藏div
以下是改造可以设置同级节点的显示隐藏

html部分

     <div v-for="(item, index) in data" :key="index">
       <div @click="isShow(index)">
         <h5 res="chenbushui">{ { item.name}}</h5>
       </div>
     </div>

js部分

    isShow(index) { 
       let _el = this.$refs.chenbushui[index]		// 通过下标找到对应同级节点
      if (_el.getAttribute('class') === 'active') { 
        _el.setAttribute('class', '')
      } else { 
        _el.setAttribute('class', 'active')
      }
    }

css部分

.active{ 
	display:none;
}
    原文作者：陈不水
    原文地址: https://blog.csdn.net/weixin_49074984/article/details/108143124
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞