Vue implementiert Beispielcode, um alle und keine 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.

Die Funktion „Alle auswählen“ kann als eine sehr häufige Funktion in der Front-End-Entwicklung bezeichnet werden. In der Vergangenheit wurde jQuery hauptsächlich in der 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>

Verwenden Sie den bidirektionalen Datenbindungs-V-Modell-Befehl von Vue, 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.

Die Hintergrunddaten lauten beispielsweise so:

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

Sie müssen zuerst die Kontrollkästchenoption dynamisch rendern , und führen Sie dann die Datenbindung durch.

<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>

Methode ist nicht die optimale Art zu schreiben, und es gibt sie auch Einige Nachteile können Sie mir gerne mitteilen und gemeinsam besprechen.

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

vue verwendet vue-i18n, um den Internationalisierungsimplementierungscode zu implementieren

Unendliches Laden von Vue in Vue - Methode zum unendlichen Laden

vue-infinite-loading2.0 Chinesische Dokumentation, detaillierte Erklärung

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