Vue implementiert Beispielcode, um all und none_vue.js auszuwählen

In diesem Artikel wird hauptsächlich der Beispielcode für die Auswahl aller und keiner in Vue vorgestellt. Jetzt teile ich ihn mit Ihnen und gebe ihn als Referenz. Schauen wir uns das gemeinsam an

Man kann sagen, dass die Funktion „Alles auswählen“ eine sehr häufige Funktion in der Frontend-Entwicklung ist. In der Vergangenheit wurde jQuery hauptsächlich für die Projektentwicklung verwendet. Kürzlich habe ich mein vorheriges Projekt mit dem Vue-Frontend-Framework umgestaltet. Der Übergang von jQuery zu Vue ist hauptsächlich eine Änderung des Denkens. Die ursprüngliche Idee, DOM direkt in Betriebsdaten umzuwandeln, ist auch eine Kernidee des Vue-Frameworks Das Denken führt zur Realisierung von Funktionen, die natürlich leichter zu verstehen sind.

Zum Beispiel die folgende einfache Demo

Wenn Sie es gemäß der jQuery-Idee tun, müssen Sie es tun Wählen Sie die Kontrollkästchen „Alle auswählen“ und „Alle Kontrollkästchen“ aus, um jeweils ausgewählte Ereignisse zu registrieren und den ausgewählten Status zu bestimmen, um den entsprechenden Status für das entsprechende Kontrollkästchen festzulegen, was viele DOM-Vorgänge erfordert.

Werfen wir einen Blick auf die Idee des datengesteuerten Doms von Vue, um diese Funktion zu implementieren.

Vue datengesteuerte Dom-Implementierungsfunktion

<p 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>
</p>
<script>
  new Vue({
    el: &#39;#app&#39;,
    data(){
      return {
        checkData: [] // 双向绑定checkbox数据数组
      }
    },
    watch: { // 监视双向绑定的数据数组
      checkData: {
        handler(){ // 数据数组有变化将触发此函数
          if(this.checkData.length == 3){
            document.querySelector(&#39;#quan&#39;).checked = true;
          }else {
            document.querySelector(&#39;#quan&#39;).checked = false;
          }
        },
        deep: true // 深度监视
      }
    },
    methods: {
      checkAll(e){ // 点击全选事件函数
        var checkObj = document.querySelectorAll(&#39;.checkItem&#39;); // 获取所有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>

Verwendung der zwei- way data Binden Sie den V-Model-Befehl. Wenn diese Option aktiviert ist, wird der Wert des Kontrollkästchens automatisch an das gebundene Array checkData übertragen, wodurch viele Vorgänge im DOM eingespart werden.

Wenn es sich um eine feste Option handelt, kann dies erreicht werden, aber diese Methode hat einige Nachteile. Die bidirektionale Bindung von Array-Daten ist fest codiert und nicht sehr flexibel , muss die Wache geändert werden. Bestimmen Sie die Länge des gebundenen Arrays.

Manchmal wird die Kontrollkästchenoption dynamisch aus dem Hintergrund abgerufen, was flexibler ist.

Zum Beispiel sind die Hintergrunddaten so:

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

Benötigt dynamisch gerendert werden soll erste Checkbox-Option für die Datenbindung.

<p id="app">
  <p 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>
  </p>
</p>
<script>
  new Vue({
    el: &#39;#app&#39;,
    data(){
      return {
        ajaxData: [{ // 后台请求过来的数据
          name: &#39;选项1&#39;,
          value: &#39;apple&#39;
        },{
          name: &#39;选项2&#39;,
          value: &#39;banana&#39;
        },{
          name: &#39;选项3&#39;,
          value: &#39;orange&#39;
        }],
        checkData: [] // 双向数据绑定的数组
      }
    },
    watch: {
      checkData: { // 监视双向绑定的数组变化
        handler(){
          if(this.checkData.length == this.ajaxData.length){
            document.querySelector(&#39;#quan&#39;).checked = true;
          }else {
            document.querySelector(&#39;#quan&#39;).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) == &#39;-1&#39;){ 
              this.checkData.push(el.value);
            }
          });
        }else { // 全不选选则清空绑定的数组
          this.checkData = [];
        }
      }
    }
  });
</script>

Die Methode ist nicht optimal Es gibt auch einige Nachteile in der Schreibweise. Gerne können Sie uns einige Ratschläge geben und diese gemeinsam besprechen.

Github-Adresse: https://github.com/zhangqian00/

Verwandte Empfehlungen:

laravel5.3 vue implementiert die Favoritenfunktion

Detaillierte Erklärung zur Implementierung eines coolen Menü-Plug-Ins für Vue

Das obige ist der detaillierte Inhalt vonVue implementiert Beispielcode, um all und none_vue.js auszuwählen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!