vue 實現全選全不選的示例代碼

2019-11-19 14:05:23

字體：大中小

來源：轉載

供稿：網友

全選功能可以說是前端開發中非常常見的一個功能，以前的項目開發用jQuery開發比較多。最近在使用vue前端框架重構之前的項目。從jQuery到vue的轉變主要是一個思想想的轉變，是將原有的直接操作dom的思想轉變到操作數據，用數據驅動dom，也是vue框架的一個核心思想，思想轉變過來，對功能的實現自然容易理解一些。

例如下面這個簡單的demo

按照jQuery的思想來做的話，要選中全選checkbox和所有的checkbox項，分別注冊選中事件，判斷選中狀態來給相關的checkbox設置對應的狀態，這就涉及到很多的dom操作。

下面就看一下vue數據驅動dom的思想來實現這一功能。

vue數據驅動dom實現功能

<div class="checkbox">  <label for="quan">    <!-- 這里的 $event 是將當前對象傳入進去，具體詳情請參照vue官方文檔 -->    <input id="quan" type="checkbox" @click="checkAll($event)"> 全選  </label>  <label>    <!-- v-model 雙向數據綁定命令 -->    <input class="checkItem" type="checkbox" value="apple" v-model="checkData"> apple  </label>  <label>    <input class="checkItem" type="checkbox" value="banana" v-model="checkData"> banana  </label>  <label>    <input class="checkItem" type="checkbox" value="orange" v-model="checkData"> orange  </label></div><script>  new Vue({    el: '#app',    data(){      return {        checkData: [] // 雙向綁定checkbox數據數組      }    },    watch: { // 監視雙向綁定的數據數組      checkData: {        handler(){ // 數據數組有變化將觸發此函數          if(this.checkData.length == 3){            document.querySelector('#quan').checked = true;          }else {            document.querySelector('#quan').checked = false;          }        },        deep: true // 深度監視      }    },    methods: {      checkAll(e){ // 點擊全選事件函數        var checkObj = document.querySelectorAll('.checkItem'); // 獲取所有checkbox項        if(e.target.checked){ // 判定全選checkbox的勾選狀態          for(var i=0;i<checkObj.length;i++){            if(!checkObj[i].checked){ // 將未勾選的checkbox選項push到綁定數組中              this.checkData.push(checkObj[i].value);            }          }        }else { // 如果是去掉全選則清空checkbox選項綁定數組          this.checkData = [];        }      }    }  });</script>

利用vue的雙向數據綁定v-model命令，當勾選時，checkbox的value值會自動push到所綁定的數組checkData中去，省去了不少對dom的操作。

如果是固定選項這樣是可以實現的，但是這種方法有一些弊端，雙向綁定數組數據是寫死的，不太靈活，如果增加了checkbox選項，要更改wach里綁定數組的長度判斷。

有時候checkbox選項也是后臺動態獲取過來的，這樣也靈活一些。

例如后臺數據是這樣的：

  ajaxData: [{    name: 'a',    value: 'apple'  },{    name: 'b',    value: 'banana'  },{    name: 'c',    value: 'orange'  }]

需要先動態渲染checkbox選項，在進行數據綁定。

<div id="app">  <div class="checkbox">    <label for="quan">      <!-- 這里的 $event 是將當前對象傳入進去，具體詳情請參照vue官方文檔 -->      <input id="quan" type="checkbox" @click="checkAll($event)"> 全選    </label>    <label v-for="item in ajaxData">      <!-- v-model 雙向數據綁定命令 -->      <input class="checkItem" type="checkbox" :value="item.value" v-model="checkData"> {{item.name}}    </label>  </div></div><script>  new Vue({    el: '#app',    data(){      return {        ajaxData: [{ // 后臺請求過來的數據          name: '選項1',          value: 'apple'        },{          name: '選項2',          value: 'banana'        },{          name: '選項3',          value: 'orange'        }],        checkData: [] // 雙向數據綁定的數組      }    },    watch: {      checkData: { // 監視雙向綁定的數組變化        handler(){          if(this.checkData.length == this.ajaxData.length){            document.querySelector('#quan').checked = true;          }else {            document.querySelector('#quan').checked = false;          }        },        deep: true      }    },    methods: {      checkAll(e){ // 點擊全選事件        if(e.target.checked){          this.ajaxData.forEach((el,i)=>{            // 數組里沒有這一個value才push，防止重復push            if(this.checkData.indexOf(el.value) == '-1'){               this.checkData.push(el.value);            }          });        }else { // 全不選選則清空綁定的數組          this.checkData = [];        }      }    }  });</script>