집 >웹 프론트엔드 >JS 튜토리얼 >vue를 사용하여 전체 선택 및 반전 선택 기능 구현

vue를 사용하여 전체 선택 및 반전 선택 기능 구현

php中世界最好的语言원래의: 2018-04-20 16:38:063338검색

이번에는 vue를 사용하여 전체 선택 및 반전 선택 기능을 구현하는 방법에 대한 Notes를 가져오겠습니다. 다음은 실제 사례입니다.

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

예를 들어 다음 간단한 데모

에서 jQuery의 아이디어에 따라 수행되면 모두 선택 확인란과 모든 확인란 항목을 선택하고 선택한 이벤트를 각각 등록하고 선택 항목을 결정해야 합니다. 많은 dom 작업이 포함된 해당 체크박스 상태를 설정하는 status입니다.

이 기능을 구현하기 위한 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: '#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>

vue의 양방향 데이터 바인딩 v-model 명령을 사용하여 선택하면 체크박스의 값이 자동으로 바인딩된 배열 checkData에 푸시되어 많은 작업이 필요하지 않습니다. dom에서의 작업.

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

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

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

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

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

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

이 방법은 최적의 글쓰기 방식이 아니며, 몇 가지 단점도 있으니 조언을 주시고 함께 논의해 보시기 바랍니다.

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!