vue如何實(shí)現(xiàn)全選全不選-創(chuàng)新互聯(lián)

這篇文章主要介紹了vue如何實(shí)現(xiàn)全選全不選，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

創(chuàng)新互聯(lián)為您提適合企業(yè)的網(wǎng)站設(shè)計(jì)?讓您的網(wǎng)站在搜索引擎具有高度排名，讓您的網(wǎng)站具備超強(qiáng)的網(wǎng)絡(luò)競(jìng)爭(zhēng)力！結(jié)合企業(yè)自身，進(jìn)行網(wǎng)站設(shè)計(jì)及把握，最后結(jié)合企業(yè)文化和具體宗旨等，才能創(chuàng)作出一份性化解決方案。從網(wǎng)站策劃到成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站制作，我們的網(wǎng)頁設(shè)計(jì)師為您提供的解決方案。

全選功能可以說是前端開發(fā)中非常常見的一個(gè)功能，以前的項(xiàng)目開發(fā)用jQuery開發(fā)比較多。最近在使用vue前端框架重構(gòu)之前的項(xiàng)目。從jQuery到vue的轉(zhuǎn)變主要是一個(gè)思想想的轉(zhuǎn)變，是將原有的直接操作dom的思想轉(zhuǎn)變到操作數(shù)據(jù)，用數(shù)據(jù)驅(qū)動(dòng)dom，也是vue框架的一個(gè)核心思想，思想轉(zhuǎn)變過來，對(duì)功能的實(shí)現(xiàn)自然容易理解一些。

例如下面這個(gè)簡(jiǎn)單的demo

vue如何實(shí)現(xiàn)全選全不選

按照jQuery的思想來做的話，要選中全選checkbox和所有的checkbox項(xiàng)，分別注冊(cè)選中事件，判斷選中狀態(tài)來給相關(guān)的checkbox設(shè)置對(duì)應(yīng)的狀態(tài)，這就涉及到很多的dom操作。

下面就看一下vue數(shù)據(jù)驅(qū)動(dòng)dom的思想來實(shí)現(xiàn)這一功能。

vue數(shù)據(jù)驅(qū)動(dòng)dom實(shí)現(xiàn)功能

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

利用vue的雙向數(shù)據(jù)綁定v-model命令，當(dāng)勾選時(shí)，checkbox的value值會(huì)自動(dòng)push到所綁定的數(shù)組checkData中去，省去了不少對(duì)dom的操作。

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

有時(shí)候checkbox選項(xiàng)也是后臺(tái)動(dòng)態(tài)獲取過來的，這樣也靈活一些。

例如后臺(tái)數(shù)據(jù)是這樣的：

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

需要先動(dòng)態(tài)渲染checkbox選項(xiàng)，在進(jìn)行數(shù)據(jù)綁定。

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

vue如何實(shí)現(xiàn)全選全不選

vue是什么

Vue是一套用于構(gòu)建用戶界面的漸進(jìn)式JavaScript框架，Vue與其它大型框架的區(qū)別是，使用Vue可以自底向上逐層應(yīng)用，其核心庫只關(guān)注視圖層，方便與第三方庫和項(xiàng)目整合，且使用Vue可以采用單文件組件和Vue生態(tài)系統(tǒng)支持的庫開發(fā)復(fù)雜的單頁應(yīng)用。

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“vue如何實(shí)現(xiàn)全選全不選”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計(jì)公司，關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計(jì)公司行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來學(xué)習(xí)!

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、網(wǎng)站設(shè)計(jì)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。

網(wǎng)站名稱：vue如何實(shí)現(xiàn)全選全不選-創(chuàng)新互聯(lián)
標(biāo)題路徑：http://www.muchs.cn/article32/ihdpc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供企業(yè)網(wǎng)站制作、搜索引擎優(yōu)化、網(wǎng)站收錄、品牌網(wǎng)站制作、虛擬主機(jī)、網(wǎng)站策劃

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容