vue实现单选多选全选全不选功能

单选
当用v-for渲染一组数据的时候，可以带上index来区分他们，这里利用这个index来简单地实现单选

<ul class="user-content" v-for="(list,index) in translist" :class="{bgcolor:index == checkid}" @click="checktrans(index)">
 </ul>

根据点击的index,添加class属性:bgcolor

data() {
     return {
     	checkid:''
     }
 }
 methods:{
      checktrans(index){
          this.cleckid=index;
      },
 }

多选
多选的原理和单选一样，只不过这次要维护的是一个数组，不是单个的checkid

<ul class="toast-content" v-for="(list,index) in translist" :class="transArr.includes(index)?'bgcolor':''" @click="Listchoose(index)">
</ul>

data() {
    return {
       transArr: [],
    }
}

点击一次push一次index到transArr[]中，如果这个transArr[]中有这个index了那就不要它了，实现了点一次选中再点一次取消。

methods:{
   	Listchoose(i){
         var idx = this.transArr.indexOf(i);
         if(idx>-1){
             this.transArr.splice(idx,1);
         }else{
             this.transArr.push(i);
         }
     },
}

全选

<p @click="checkAll()">全选</p>

methods:{
   //全选
   checkAll(){
        var len = this.translist.length;
        this.transArr = [];
        for(var i=0;i<len;i++){
            this.transArr.push(i);
        }
    },
}

经常遇到一个按钮控制全选/全不选，下面在全选的基础上附上 全选/全不选 代码
全选/取消全选

<p @click="choosecheck()">{{isCheckAll?'清空':'全选'}}</p>

methods:{
//全选/取消全选转换
   choosecheck(){
       if(this.isCheckAll){
           this.clearCheckbox();
       }else{
           this.checkAll()
       }
   },
   //全选
   checkAll(){
        var len = this.translist.length;
        this.transArr = [];
        for(var i=0;i<len;i++){
            this.transArr.push(i);
        }
    },
    //取消全选
    clearCheckbox(){
        this.transArr = [];
    },
}
computed: {
     isCheckAll(){
         if(this.transArr.length==this.translist.length){
             return true;
         }
             return false;
     },
 }