vue2.x v-for下点击添加class 样式刷新不消失 实现类似多选的功能

下面代码实现的功能：

v-for遍历下的元素，点击哪一个就给哪一个添加激活的样式，如果已经添加了样式，则点击取消样式。

点击下一个时，点击过的样式不会消失，类似于多选

思路：
先定义一个空数组isAdd用于存放激活元素的索引
点击时在class的判断条件中用indexOf搜索当前索引是否在数组isAdd中
如果在就添加tavActive样式

效果如下：

上代码：

<p v-for="(sel, index) in selection" :key="index" :class="{ tavActive:isAdd.indexOf(index) != -1 }" @click="tabCheck(index)">{{sel}}</p>

<script>
    export default {
      name: "details",
      data(){
          return{
            selection:["tab1", 'tab2','tab3'],
            isAdd:[]
          }
      },
      methods:{
        tabCheck(index){

          let indexItem = this.isAdd.indexOf(index);

          if( indexItem == -1 ){
            this.isAdd.push(index);
          }else{
            this.isAdd.splice(indexItem,1);
          }
        }
        
      }
    }
</script>

如果要样式刷新不消失，将isAdd存入本地缓存就好了，sessionStorage或者localStorage都可以，看自己业务而定。