vue中復選框全選與反選

　　html主要部分：　

<template v-for="(item, index) in checkboxList">
　　<input type="checkbox" v-model="selectList" :value="item">
</template>

　　初始化selectList = []，checkboxList = ['蘋果', '橡膠', '梨', '桃子']。

　　首先說全選事件，這個比較好弄。就是每次觸發事件的時候先清空selectList，然后將checkboxList的值賦值給selectList就行了。

　　

　　反選事件。所謂反選就是先判斷如果有選中的則將其狀態變為未選中，未選中則將其狀態變為選中。

　　今天偶然發現一個很好用的方法，就是借鑒兩個數組，判斷是否有相同元素，然后去重這種思路來解決反選問題。

const _this = this
let checkboxList = _this.checkboxList 
let selectList = _this.selectList
let tempArr1 = []
let tempArr2 = []
if (!_this.selectList.length) {
   _this.selectList = _this.checkboxList 
} else {
  for (let i = 0, len = selectList.length; i < len; i ++) {
   tempArr1[selectList[i]] = true    //將數selectList中的元素值作為tempArr1中的鍵，值為true
  }
  for(var j=0, lenj = checkboxList.length;j < lenj;j++){
   if(!tempArr1[checkboxList[j]]){
    tempArr2.push(checkboxList[j]); // 過濾checkboxList與selectList中相同的元素
   }
  }
  _this.selectList = tempArr2 
}