Vueで全選択・逆選択機能を実装した場合の詳細説明

今回はVueで全選択と逆選択機能を実装する場合の詳しい解説をお届けします 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>

この方法は最適な書き方ではありませんし、デメリットもいくつかありますので、アドバイスや一緒に議論していただければ幸いです。

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

vueは検索リストコンテンツを実装します

axiosで投稿リクエストを送信し、画像フォームを送信するためのステップバイステップの詳細な説明

以上がVueで全選択・逆選択機能を実装した場合の詳細説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。