Vue는 모두 선택하고 선택하지 않는 샘플 코드를 구현합니다.-JS 튜토리얼-php.cn

Vue는 모두 선택하고 선택하지 않는 샘플 코드를 구현합니다.

亚连

풀어 주다： 2018-05-28 14:05:19

원래의

2167명이 탐색했습니다.

이 글에서는 select all and none을 구현하기 위한 Vue의 샘플 코드를 주로 소개합니다. 이제 참고용으로 공유하겠습니다.

모두 선택 기능은 프론트엔드 개발에서 매우 흔한 기능이라고 할 수 있습니다. 예전에는 프로젝트 개발에서 jQuery를 주로 사용했습니다. 최근에 저는 vue 프런트엔드 프레임워크를 사용하여 이전 프로젝트를 리팩토링하고 있었습니다. jQuery에서 Vue로의 전환은 주로 DOM을 직접 운영하는 원래 아이디어를 데이터를 운영하는 것으로 변환하는 것입니다. DOM을 구동하는 것도 Vue 프레임워크의 핵심 아이디어입니다. 생각하면 당연히 기능이 더 쉽게 이해될 것입니다.

예를 들어 다음 간단한 데모

에서 jQuery의 아이디어대로 했다면 모두 선택 체크박스와 모든 체크박스 항목을 선택하고, 선택한 이벤트를 각각 등록하고, 선택된 상태를 사용하여 관련 체크박스에 대한 설정을 지정합니다. 여기에는 많은 DOM 작업이 포함됩니다.

이 기능을 구현하기 위해 Vue 데이터 기반 DOM의 아이디어를 살펴보겠습니다.

vue 데이터 기반 DOM 구현 기능

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

로그인 후 복사

vue의 양방향 데이터 바인딩 v-model 명령을 사용하여 선택하면 확인란의 값이 자동으로 바인딩된 배열 checkData에 푸시되어 dom에 대한 많은 작업.

고정 옵션이면 가능하지만 이 방법에는 몇 가지 단점이 있습니다. 배열 데이터의 양방향 바인딩은 하드 코딩되어 있어 유연성이 떨어집니다. wa의 배열을 변경해야 합니다.

때때로 체크박스 옵션이 배경에서 동적으로 획득되어 더욱 유연해집니다.

예를 들어 배경 데이터는 다음과 같습니다.

  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;
  }]

로그인 후 복사

먼저 체크박스 옵션을 동적으로 렌더링한 다음 데이터 바인딩을 수행해야 합니다.

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

로그인 후 복사