VUE 实现全选反选三种方法

在遇到类似于全选与反选的功能，可以从勾选数来判断，也可以从勾选框是否全勾选，这里以vue为基础，列举几个实现全选反选的几种方法;

<div class="list">
      <div class="footer">
        <input type="checkbox" v-model="allSelected"></input>
      </div>
      <p v-for="(value,index) in list">
        <input type="checkbox" v-model="value.checked"></input>
        <span>{{value.title}}</span>
      </p>
</div>

export default {
  name: 'app',
  data(){
    return {
      list:[
        {title:'vue',checked:false},
        {title:'html',checked:false},
        {title:'css',checked:false},
        {title:'javascript',checked:false},
      ],
    }
  },
}

方法一：用的是reduce方法，用该方法遍历数组累加计算，计算出勾选数，比对勾选数是否和数组长度相等，从而判断是否全选；

  computed:{
    //勾选的个数
    selectedCount(){
      return this.list.reduce((pre,cur)=>pre+(cur.checked?1:0),0);
    },
    //全选与反选
    allSelected:{
      get(){
        return this.selectedCount==this.list.length&&this.list.length>0;
      },
      set(isCheck){
        this.list.forEach(t=>{
          t.checked=isCheck;
        })
      }
    }
  },

这里也可以用for…of循环遍历计算勾选数量，只是用reduce会更让代码更简洁些。

computed:{
    //勾选的个数
    selectedCount(){
      let num=0;
      for(let x of this.list){
        x.checked?num+=1:num+=0;
      }
      return num;
    }
}

方法二：用every方法，该方法判断数组里的每个checked值是否都为true，如果都为true，则返回true，否则返回false;

  computed:{
    allSelected:{
      get(){
        return this.list.every(i => {
           return i.checked;
        })
      },
      set(isCheck) {
        this.list.forEach(t=>{
          t.checked=isCheck;
        });
      }
    }
  },

方法三：通过方法二变换一下，用some方法。当有一个checked值为false时，则返回true，然后直接返回一个取反值。在全选反选的例子里，实用性不如every方法强，但这也算是一种变换思维的解决方法；

  computed:{
    allSelected:{
      get(){
        const isAll=this.list.some(i => {
           return !i.checked;
        });
        return !isAll;
      },
      set(isCheck) {
        this.list.forEach(t=>{
          t.checked=isCheck;
        });
      }
    }
  },