Vue列表中，如何实现多选？

首先看一下html列表:
第一步：写html结构时，需要将选中的状态写好，当div的class是checked-item时，是选中的状态，所以我们只需要判断选中的时候，class带有checked-item即可；
第二步：获取当前选中的id，@click="checkGroup(item.id)
第三步：在选中的事件checkGroup中做处理：点击将id存放在数组groupIds中；
includes()方法判断是否包含某一元素,返回true或false表示是否包含元素，对NaN一样有效
如果包含此id（选中此id）则用arr.indexOf(id)检测，此id的位置，然后利用arr.splice(index,1)将此id去掉。
第四步：在判断class时，运用数组的includes的方法，判断是否包含这个id，groupIds.includes(item.id)。

 <div :class="['class-item',{'checked-item':groupIds.includes(item.id)}]" v-for="(item,index) in groupList" :key="index" @click="checkGroup(item.id)">            
         <div class="info fl">
              <p class="name ellipsis-line1">{{item.groupName}}</p>
              <p class="teacher">班主任：{{item.headTeacherName}}</p>
          </div>
          <p class="number">{{item.parentsCount}}名成员</p>
          <img class="check" src="../../assets/img/sc-selected-sm.png" alt="">
 </div>

js代码,groupList[]这个是从后台接口中获取的数据
在这里插入代码片

export default{
    data(){
      return {
       
        groupList: [] ,// 班级列表
        groupIds: [], // 选中班级id数组

      }
    },
  
    methods:{
      // 选择班级
      checkGroup(id){
        let _this = this;
        let arr = _this.groupIds;
        if(arr.includes(id)){
          //includes()方法判断是否包含某一元素,返回true或false表示是否包含元素，对NaN一样有效
            let index = arr.indexOf(id); // 判断数组中是否有选中的id,如果有则去掉
            if(index > -1){
             arr.splice(index,1)
            }
        }else{
           _this.groupIds.push(id)
        }

      },
      
    }
  }

本文地址：https://blog.csdn.net/qq_16945933/article/details/107352910