vue を使用して全選択および反転選択関数を実装する-jsチュートリアル-php.cn

vue を使用して全選択および反転選択関数を実装する

php中世界最好的语言

リリース： 2018-04-20 16:38:06

オリジナル

3304 人が閲覧しました

今回は、vue を使用して全選択と反転選択関数を実装する方法についてのメモをお届けします。以下は実際のケースです。見てみましょう。

全選択機能はフロントエンド開発においては非常に一般的な機能と言えますが、以前はプロジェクト開発では主にjQueryが使用されていました。最近、私は vue フロントエンドフレームワークを使用して以前のプロジェクトをリファクタリングしていました。 jQuery から Vue への移行は、主に 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: '#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 に自動的にプッシュされ、大量の実装が不要になりますドムの作戦。

固定オプションであればこれを実現できますが、この方法にはいくつかの欠点があります。チェックボックスオプションを追加すると、双方向バインディング配列データがあまり柔軟ではなくなります。 wach の配列を変更する必要があります。

場合によっては、チェックボックスのオプションがバックグラウンドから動的に取得されるため、より柔軟になります。

たとえば、バックグラウンドデータは次のようなものです:

  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>

ログイン後にコピー