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

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

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;
}