Vueでカスタム命令を操作してチェックボックス選択機能を実装する方法-jsチュートリアル-php.cn

Vueでカスタム命令を操作してチェックボックス選択機能を実装する方法

亚连

リリース： 2018-06-02 17:26:10

オリジナル

2360 人が閲覧しました

ここで、Vue のカスタム命令を使用してチェックボックス選択機能を実装する方法を共有します。これは良い参考値であり、皆さんの役に立つことを願っています。

私が最近取り組んだプロジェクトでは、全選択機能を実装するために Vue を使用する必要がありました。オンラインの方法を調べたところ、属性計算の再利用性が高くないことがわかったので、ほとんどの場合はカスタム命令を選択しました。メソッドは元のデータに基づいており、特定の形式要件があり、結果が返されなかったため、改善が行われました。

上記のコード:

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
 </head>
 <body>
  <p id="app">
  <input type="checkbox" v-model="allCheck" v-check-all="allCheck" check-data="list" result="customerResult" key="demo"> 全选
  <ul> 
   <li v-for="item in list"> 
    <input type="checkbox" v-model="item.checked"> 
    {{item.demo}}
   </li> 
  </ul> 
  <p >
   customerResult: {{customerResult}}
  </p>
  </p>
  <script src="vue.js"></script>
  <script>
   var vm = new Vue({
    el: "#app",
    data:function(){
     return {
      list:[{demo:1},
      {demo:2},
      {demo:3}],
      allCheck:&#39;&#39;,
      customerResult:&#39;&#39;,
     }
    },
    directives: {
     &#39;check-all&#39;: {
      twoWay: true,
      params: [&#39;checkData&#39;,&#39;result&#39;,&#39;key&#39;],
      bind() {
       /*为原始数据的每一个对象添加一个checked属性*/
       this.vm[this.params.checkData].forEach((item)=>{
        Vue.set(item,&#39;checked&#39;,false)
       });
       /*提取被选中的项*/
       this.setValue=function(){
        let result=[]
        this.vm[this.params.checkData].forEach((item) => {
         if(item.checked){
          result.push(item[this.params.key])
         }
        });
        this.vm[this.params.result]=result
       }
        /*如果所有的列表的checked属性都为true,则选中全选框,否则不选中全选框 */
       this.vm.$watch(this.params.checkData, (data) => {
        if(data.every((item) => item.checked)) {
         this.set(true);
        } else {
         this.set(false);
        }
        this.setValue()
       }, {deep: true});
      },
      // checkAll发生更改时 
      update(checkAll) {
        /*如果全选框被选中,则将列表的所有checked属性转为true,否则转为false */
       if(checkAll) {
        this.vm[this.params.checkData].forEach((item) => {
         item.checked = true;
        });
       } else {
        this.vm[this.params.checkData].forEach((item) => {
         item.checked = false;
        });
       }
       this.setValue()
      },
     },
    }
   })
  </script>
 </body>
</html>

ログイン後にコピー

通常、元データ内の特定のキー値を取得する必要があります。「key」には取得したいキー値を入力でき、「result」は選択された 1 つのアイテム。
場合によっては、完全なオブジェクトを返してコードを変更する必要があります。キーが入力されていない場合は、オブジェクトの完全な配列が返されます。ただし、現時点では、返される配列内のオブジェクトは返されません。元のデータは同じ参照アドレスを持っています。 array.$remove() 関数を使用する必要がある場合、新しい相対パラメータが追加され、返されたデータが元のデータに関連するかどうかをカスタマイズできます。 data

this.setValue=()=>{
 let result=[]
 this.vm[this.params.checkData].forEach((item) => {
  //删除checked属性
  let temp={};
  (()=>delete Object.assign(temp,item).checked)();
  item.checked?result.push(item[this.params.key]||temp):"";
 });
 this.vm[this.params.result]=result
}

ログイン後にコピー

データの長さが2より大きい場合、2N回判定する必要があり、パフォーマンスを大幅に消費します:

this.setValue = () => {
 let result = []
 this.vm[this.params.checkData].forEach((item) => {
  if(this.params.relative) {
   item.checked ? result.push(item) : "";
  }else{
   //删除checked属性
   let temp = {};
   (() => delete Object.assign(temp, item).checked)();
   item.checked ? result.push(item[this.params.key] || temp) : "";
  }
 });
 this.vm[this.params.result] = result
}

ログイン後にコピー

現時点では、それのみを最適化します。 N+1回判定する必要がある。

上記は私があなたのためにまとめたものです。

p5.js入門チュートリアル - マウスインタラクションの例

Vueで双方向バインディングを実装する4つの方法

ルーティングナビゲーションメニューバーのVueハイライト設定方法

以上がVueでカスタム命令を操作してチェックボックス選択機能を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。