Vue は、すべてと none_vue.js を選択するサンプルコードを実装します。-jsチュートリアル-php.cn

Vue は、すべてと none_vue.js を選択するサンプルコードを実装します。

不言

リリース： 2018-03-31 16:38:43

オリジナル

1997 人が閲覧しました

この記事では主に、select all と none を実装するための Vue のサンプルコードを紹介します。ぜひ一緒に見てください

全選択機能は、以前はプロジェクト開発で主に使用されていたフロントエンド開発では非常に一般的な機能と言えます。最近、私は 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: &#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>

ログイン後にコピー