So erreichen Sie mit Vue eine vollständige Auswahl und eine umgekehrte Auswahl

Dieses Mal zeige ich Ihnen, wie Sie mit Vue All-Select und Reverse-Select erreichen und welche Vorsichtsmaßnahmen es gibt, um mit Vue All-Select und Reverse-Select zu erreichen Ein praktischer Fall, werfen wir einen Blick darauf.

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 Idee von jQuery tun, müssen Sie es tun Aktivieren Sie das Kontrollkästchen „Alle auswählen“ und alle Kontrollkästchen „Elemente“, registrieren Sie jeweils ausgewählte Ereignisse und bestimmen Sie 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.

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

Die Methode ist nicht die beste 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:

So verwenden Sie die Vue-Dateibaumkomponente

Analyse der zugrunde liegenden Logik von JavaScript EventEmitter

Das obige ist der detaillierte Inhalt vonSo erreichen Sie mit Vue eine vollständige Auswahl und eine umgekehrte Auswahl. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!