ホームページ > 記事 > ウェブフロントエンド > Vueでカスタム命令を操作してチェックボックス選択機能を実装する方法
Vueでカスタム命令を操作してチェックボックス選択機能を実装する方法
- 亚连オリジナル
- 2018-06-02 17:26:102379ブラウズ
ここで、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:'',
customerResult:'',
}
},
directives: {
'check-all': {
twoWay: true,
params: ['checkData','result','key'],
bind() {
/*为原始数据的每一个对象添加一个checked属性*/
this.vm[this.params.checkData].forEach((item)=>{
Vue.set(item,'checked',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ハイライト設定方法
以上がVueでカスタム命令を操作してチェックボックス選択機能を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。