Vue はすべてを選択し、何も選択しないサンプル コードを実装します。

この記事では主に、select all と none を実装するための 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: &#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 に対する多くの操作。

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

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

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

  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: &#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>

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

上記は私があなたのためにまとめたものです。関連記事：vue vue-i18nを使用して国際化コードを実装します

vue-infinite-loading2.0中国のドキュメントのvue-infinite-loadingメソッド

以上がVue はすべてを選択し、何も選択しないサンプル コードを実装します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。