Vue führt vollständige Auswahl- und inverse Auswahlfunktionen durch

Dieses Mal stelle ich Ihnen die Funktionen zum Auswählen aller und zum Umkehren der Auswahl in Vue vor. Was sind die Vorsichtsmaßnahmen für die Verwendung der Funktion zum Auswählen aller und zum Umkehren der Auswahl in Vue? , lass uns einen Blick darauf werfen.

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 Umstellung der ursprünglichen Idee, DOM direkt in Betriebsdaten umzuwandeln, und zwar 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 Idee von jQuery tun, müssen Sie „Alles auswählen“ auswählen Kontrollkästchen und alle Kontrollkästchen Elemente registrieren jeweils ausgewählte Ereignisse und bestimmen den ausgewählten Status, um den entsprechenden Status für das entsprechende Kontrollkästchen festzulegen, was viele Dom-Operationen 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: '#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>

Bei Verwendung des bidirektionalen Datenbindungs-V-Modell-Befehls von Vue wird der Wert des Kontrollkästchens automatisch verschoben, wenn es aktiviert ist an Das gebundene Array checkData spart viele Vorgänge im DOM.

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 in wach muss die Länge des Arrays geändert werden.

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

Die Hintergrunddaten sehen beispielsweise so aus:

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

Sie müssen zuerst die Kontrollkästchenoption dynamisch rendern und dann die Datenbindung durchführen. Die

<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: '#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>

-Methode ist nicht die optimale Art zu schreiben, und es gibt auch einige Nachteile. Sie können uns gerne einige Ratschläge geben und diese gemeinsam besprechen.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Praktischer Fall zum Aufrufen von Unterkomponenten durch übergeordnete Vue-Komponenten

Detaillierte Erläuterung der Schritte zum Ziehen von JS-Implementierungsdateien (beigefügter) Code)

Das obige ist der detaillierte Inhalt vonVue führt vollständige Auswahl- und inverse Auswahlfunktionen durch. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!