v-for循环出的列表如何实现每一项单独展开收起

可以同时展开多个各个互不影响

data中声明要循环的数据、当前的下标数组类型（array）
思路：判断当年下标是否在数组下标中来控制展开收起，不存在就将该下标加入数组，再点击一次这个下标则删去，数组中无该下标就显示收起。

<div class="content" v-for="(t,index) in List" :key="t.id">
   <div class="desc">
      <span class="btn" 
          :style="{'color': (thisIndex.indexOf (index)!=-1? '#0195ff':'#999999')}" 
          @click="show(index)">
        {{thisIndex.indexOf (index)!=-1 ? '收起' : '展开'}}
      </span>
      <i :class="thisIndex.indexOf (index) != -1 ? 'el-icon-d-arrow-left' : 'el-icon-d-arrow-right'" 
         :style="{'color': (thisIndex.indexOf (index)!=-1? '#0195ff':'#999999')}"></i>
      <div class="content" v-show="thisIndex.indexOf (index)!=-1">{{t.content}}</div>
   </div>
</div>

data() {
    return{
     List:[],
      thisIndex: []   如果想要初始化时就展开 就将下标放在thisIndex里面
    }  
  },
  methods: {
    show(index) {
      if(this.thisIndex.indexOf(index) == -1){
        this.thisIndex.push(index)
      }else{
        this.thisIndex = this.thisIndex.filter(item => item != index)
      }
    }
  }

[vue]v-for循环出的列表如何实现每一项单独展开收起_vue循环展开-CSDN博客