Verwenden Sie Vue, um die All-Select- und Invert-Select-Funktion zu implementieren

Dieses Mal werde ich Ihnen die Vorsichtsmaßnahmen zur Implementierung der Select-All- und Invert-Select-Funktion vorstellen. Das Folgende ist ein praktischer Fall.

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>

Wenn Sie den Vue-Befehl für die bidirektionale Datenbindung im V-Modell verwenden, wird der Wert des Kontrollkästchens automatisch geändert, wenn er aktiviert ist Schieben Sie es in das gebundene Array checkData, wodurch viele Vorgänge am 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 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:

vue.js+element-ui Tree Control modifizierte iview-Schritte, detaillierte Erklärung

Yuansheng JS implementiert Datei-Drag-Ereignis

Vue-Dateibaum-Fall

Das obige ist der detaillierte Inhalt vonVerwenden Sie Vue, um die All-Select- und Invert-Select-Funktion zu implementieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!