vue实现列表多选择

data数据

      dataTypeList:[
         {
          label:'数字',
          value:'TH'
        },
        {
          label:'字符串',
          value:'ZDH'
        },
        {
          label:'英文',
          value:'ZDDM'
        }
      ],

html结构：

      <div class="search_type_list">
              <div 
              :class="dataType.includes(item.label)?'search_type_list_item active':'search_type_list_item'"
              v-for="(item,index) in dataTypeList" :key="item" @click="choiceDataType(index)">
                {{item.label}}
              </div>
            </div>

methods方法：

    // 选择数据类型
    choiceDataType(index){
      const temp=this.dataTypeList[index].label
      if(this.dataType.includes(temp)){
        this.dataType=this.dataType.filter(item=>item!==temp)
      }else{
        this.dataType.push(temp);
      }
    },