vue 实现选项卡多选功能，点击选中，再点击取消选中，选中显示高亮

本次做的这个选项卡的数据是一个对象，平常的都是数组，话不多说上代码

html部分

<div class="tab1">
     <div id="box1" v-for="(item,key, index) in obj1" :key="index" @click="selected_1(key)" 
     :class="{ 'active':active_tab1.indexOf(key)>-1}">{{ item }}</div>
</div>

js部分

data中需要定义的数据

// 员工状态选项卡数据
    obj1: {},
// 员工状态控制选中高亮
    active_tab1: [],

selected_1(key) {
      let arrIndex = this.active_tab1.indexOf(key);
      if(arrIndex>-1){   // 已选中,点击取消
          this.active_tab1.splice(arrIndex,1);
      }else{  // 未选中,点击选中
         this.active_tab1.push(key);
      }
    },

ok，这样就实现的基本功能

本文地址：https://blog.csdn.net/weixin_49696014/article/details/112583803