私はVUEに関与し始めたばかりなので、Zhihuの実装方法へのすべての選択された参照の実装：
1.サーバーからデータを取得し、各アイテムのチェックされた属性を設定します
2。選択した数量SelectCountを計算します。選択した数量がselectItemsの数に等しい場合は、すべてのselectalを選択します
3.すべてを選択するとき、各アイテムのチェックされた属性をtrueに設定し、逆に選択するときは、それをfalseに設定します。
4. selectItemsのプロパティが変更されるたびに、チェックされたアイテムが配列チェックグループに配置されます。
以下は実装コードです。
//すべてのデータを選択します：function（）{return {selectItems：[]、// server}}}}}}}}}}}}データを選択します。 }、set：function（value）{this.selectitems.foreach（function（item）{item.checked = value;}）;返品値。 }}、//選択した数量selectcount：{get：function（）{var i = 0; this.selectitems.foreach（function（item）{if（item.checked）{i ++;}}）;私を返します。 }}、//選択された配列checkedgroups：{get：function（）{var checkedgroups = []; this.selectitems.foreach（function（item）{if（item.checked）{checkedgroups.push（item）;}}）;チェックグループを返します。 }}}この方法は、使用するのにあまり便利ではありません。まず第一に、再利用することは困難です。使用したいたびに、計算されたものを記述する必要があります。第二に、selectal、checkedgroups、およびselectItemsはすべて固定されており、あまり柔軟ではありません。
そのため、このプロジェクトでは、VUE命令を使用して、すべてを選択する機能を再実装しました。指令のアイデアは、実際には計算されたものと似ています。コードから始めましょう：
デフォルト{'check -all'：{twoway：true、params：['checkdata']、bind（）{ / ** - すべてのリストのチェックされた属性がtrueの場合、チェックボックスが選択されていない場合* / this.vm. item.set（true）; }、// update（checkall）checkallが変更されたとき{ / ** - チェックすべてのボックスが選択されている場合、リストのすべてのチェックプロパティがtrueに変換されます。 } else {this.vm [this.params.checkdata] .foreach（（item）=> {item.checked = false;}）; }}、}、};呼びかけ：
<入力型= "チェックボックス" v-model = "checkall" v-check-all = "checkall" checkdata "> <ul> <li v-for =" item in checkdata "> <入力タイプ=" v-model = "item.checked"> {{item.text}}} </li> </ul> </ul> </ul> </ul>これを使用することの利点について話しましょう。
1。使いやすい。必要に応じてv-check-allコマンドとcheck-dataを書くだけです。
2。選択したモデルと配列名をカスタマイズでき、任意の名前を使用できます。 CheckallとCheckallDataを呼び出したくない場合は、配列を呼び出したり、CheckData DataFromserverを呼び出したりすることもできます。
命令では、Twowayをtrueに指定します。 this.set(value)使用してCheckallの値を設定し、操作する配列であるバインディング命令要素のプロパティ値CheckDataを受信するためにParamsを使用できます。
this.vm使用して、使用法指令のコンテキストを取得するには、CheckDataの変更を聞くためにコンテキストの$watchを呼び出します。すべてのCheckDataが選択されている場合、Checkallをtrueに設定し、それ以外の場合はCheckallをfalseに設定します。
命令値（チェックオール）が変更された場合、trueの場合、checkDataのチェック属性をtrueに設定すると、それ以外の場合は偽です。この時点で、選択したコマンドが完了します。
すべての命令を選択するとき、私はもともとParamWatchersを使用してCheckDataの変更を聞きたかったのですが、CheckDataの変更時にパラマウォッチャーのコールバックがトリガーされないことがわかりました。その後、ソースコードを見て、パラメーターが実際に$watchと呼ばれることがわかりましたが、深い検出をサポートしていません。
directive.prototype._setupparamwatcher = function（key、expression）{var self = this; var calk = false; var lowatch =（this._scope || this.vm）。$ watch（expression、function（val、oldval）{self.params [key] = val; // oldval）; elles {calk = true;要約します
上記は、この記事のコンテンツ全体です。何か問題がある場合は、アドバイスをください。この記事の内容がすべての人に役立つことを願っています。