Vue implements sample code to select all and none

This article mainly introduces the sample code for implementing vue to select all and none. Now I share it with you and give you a reference.

The select all function can be said to be a very common function in front-end development. In the past, jQuery was mostly used in project development. Recently I was refactoring my previous project using the vue front-end framework. The transition from jQuery to Vue is mainly a change in thinking. It is to transform the original idea of ​​directly operating DOM into operating data. Using data to drive DOM is also a core idea of ​​the Vue framework. The change of thinking will lead to the realization of functions. Naturally easier to understand.

For example, in the simple demo below

If you do it according to the jQuery idea, you need to select the select all checkbox and All checkbox items register selected events respectively, determine the selected status to set the corresponding status for the relevant checkbox, which involves a lot of DOM operations.

Let’s take a look at the idea of ​​​​vue data-driven dom to achieve this function.

vue data-driven dom implementation function

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

Use vue's two-way data binding v-model command, when When checked, the value of the checkbox will be automatically pushed to the bound array checkData, which saves a lot of operations on the DOM.

If it is a fixed option, this can be achieved, but this method has some disadvantages. Two-way binding of array data is hard-coded and not very flexible. If the checkbox option is added, the wach needs to be changed. Determine the length of the bound array.

Sometimes the checkbox option is dynamically obtained from the background, which makes it more flexible.

For example, the background data is like this:

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

You need to dynamically render the checkbox option first, and then perform data binding .

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

method is not the optimal way to write, and there are also some disadvantages. Welcome to give me some advice and discuss together.

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

vue uses vue-i18n to achieve internationalization implementation code

Infinite loading vue in Vue -Infinite-loading method

##vue-infinite-loading2.0 Chinese document detailed explanation

The above is the detailed content of Vue implements sample code to select all and none. For more information, please follow other related articles on the PHP Chinese website!