Vue实现全选，反选，全不选

Vue实现全选，反选，全不选

在vue中实现默认选中以及获取单选/复选框的value值都会用到同一个方法，那就是在data中定义一个数组，然后用v-model=“这个数组”

data: {
    whoms:[1,2],
    }

这样就会默认选中value值是1和2的，当然也可以是字符串

<td><input type="checkbox" name="nid" id="nid" :value="site.nid" v-model="whoms"  />{{key+1}}</td>

如果是多选框，那么你选中几个，data: { whoms:[], }中就会存在几个value的值

这个就是vue全选的方法

<td style="text-align:left; padding:19px 0;padding-left:20px;">
  <input type="checkbox" id="allChecked" :checked="whoms.length==sites.length" @click="allChecked"> 全选 /全不选<!-- <span>{{whoms}}</span> -->
</td>
<td style="text-align:left; padding:19px 0;padding-left:20px;">
 <div class="button-group" id="fanChecked"><span class="button border-main" @click="fanChecked" style="padding:5px 15px;"> <span class="icon-edit"></span>反选</span></div>
</td>

在这里全选，反选可以是复选框也可以是按钮，自己随意

:checked="whoms.length==sites.length"

这句代码是实现，全选（全不选）这个按钮和整体数值的绑定，就是一个个的选中全部的复选框后，全选（全不选）按钮就会自动选中

	  allChecked: function() {
          if (this.whoms.length == this.sites.length) {
              // 全不选
              this.whoms = [];
          }else {
              this.whoms = [];
              // 全选
             this.sites.forEach((site)=>{
                  this.whoms.push(site.nid); // 与checkbox的value统一
              })
          }
      },

上面两个方法就是核心！
this.whoms.length == this.sites.length
当相等的时候说明是已经全部选中，这时候点击全选（全不选）按钮是为了全不选，否则就是打算全选

fanChecked:function(){
          // f反选
          this.sites.forEach((site)=>{
       		  if(this.whoms.indexOf(site.nid)==-1){
       			 this.whoms.push(site.nid);
           	  }else{
           		  var nkey=this.whoms.indexOf(site.nid);
           		  this.whoms.splice(nkey,1);
           	  }
          })
	  },

反选 就是用到Java的indexOf()方法 如果数组中本来就有那就是你自己选中的也就是indexOf()方法返回的值大于-1 就利用索引把这个元素删除掉，如果*indexOf()方法返回的值等于-1说明数组中没有这个值，也即是你反选的内容，需追加，
这样vue的全选全不选反选就做好了