Vue implémente un exemple de code pour sélectionner tout et rien-js tutoriel-php.cn

Vue implémente un exemple de code pour sélectionner tout et rien

亚连

Libérer： 2018-05-28 14:05:19

original

2185 Les gens l'ont consulté

Cet article présente principalement l'exemple de code pour sélectionner tout et rien dans vue. Maintenant, je le partage avec vous et le donne comme référence.

La fonction select all peut être considérée comme une fonction très courante dans le développement front-end. Dans le passé, jQuery était principalement utilisé dans le développement de projets. Récemment, je refactorisais mon projet précédent en utilisant le framework front-end Vue. La transition de jQuery vers Vue est principalement un changement de pensée. Il s'agit de transformer l'idée originale d'exploiter directement le DOM en données d'exploitation. L'utilisation de données pour piloter le DOM est également une idée centrale du framework Vue. la réflexion mènera à la réalisation de fonctions naturellement plus faciles à comprendre.

Par exemple, la démo simple suivante

Si vous le faites selon l'idée jQuery, vous devez cochez la case Sélectionner tout et Tous les éléments de la case à cocher enregistrent respectivement les événements sélectionnés, déterminez le statut sélectionné pour définir le statut correspondant pour la case à cocher appropriée, ce qui implique de nombreuses opérations DOM.

Jetons un coup d'œil à l'idée de vue data-driven dom pour implémenter cette fonction.

Fonction d'implémentation dom basée sur les données de Vue

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

Copier après la connexion

Utilisation du modèle V de liaison de données bidirectionnelle de Vue command , une fois cochée, la valeur de la case à cocher sera automatiquement poussée vers le tableau lié checkData, éliminant ainsi de nombreuses opérations sur le DOM.

S'il s'agit d'une option fixe, cela peut être réalisé, mais cette méthode présente certains inconvénients. La liaison bidirectionnelle des données du tableau est codée en dur et peu flexible si l'option de case à cocher est ajoutée. , le paramètre doit être modifié. Déterminez la longueur du tableau lié.

Parfois, l'option de case à cocher est obtenue dynamiquement à partir de l'arrière-plan, ce qui est plus flexible.

Par exemple, les données d'arrière-plan ressemblent à ceci :

  ajaxData: [{
    name: &#39;a&#39;,
    value: &#39;apple&#39;
  },{
    name: &#39;b&#39;,
    value: &#39;banana&#39;
  },{
    name: &#39;c&#39;,
    value: &#39;orange&#39;
  }]

Copier après la connexion

Vous devez afficher dynamiquement la case à cocher d'abord, puis traitez la liaison de données. La méthode

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

Copier après la connexion

n'est pas la manière optimale d'écrire, il y a certains Concernant les inconvénients, vous êtes invités à nous donner quelques conseils et à en discuter ensemble.

J'ai compilé ce qui précède pour vous, j'espère que cela vous sera utile à l'avenir.