& lt; !DOCTYPE html>
& lt; html lang=癳n”比;
& lt; head>
& lt;元charset=皍tf - 8”比;
& lt; title> Document
& lt;/head>
& lt; body>
& lt; div id=坝τ谩北?
& lt; div比;
& lt; ul比;
& lt;李v="(项目、索引)proData”比;
& lt;输入类型=案囱】颉?value=" https://www.yisu.com/zixun/index " v模型=皊electArr”在{{item.name}}
& lt;/li>
& lt;/ul>
& lt; label>
& lt;输入类型=案囱】颉盄click=皊electAll”:检查=凹觳椤?祝辞全选
& lt;/label>
& lt;/div>
& lt;/div>
& lt;/body>
& lt;脚本src=" https://cdn.jsdelivr.net/npm/vue "祝辞& lt;/script>
& lt;脚本type=" text/javascript祝辞
var vm=new Vue ({
埃尔:“#应用”,
数据:{
proData:(
{
“名称”:“张”三
}, {
“名称”:“李”四
}, {
“名称”:“王”五
}, {
“名称”:“赵六”
}
]，
selectArr: [],
检查:假
},
看:{
selectArr (curVal) {
如果(curVal。长度==this.proData.length) {
这一点。检查=true
其他}{
这一点。检查=false
}
}
},
方法:{
selectAll(事件){
如果(! event.currentTarget.checked) {
这一点。selectArr=[];
其他}{//实现全选
这一点。selectArr=[];
this.proData。forEach((项目,我)=祝辞{
this.selectArr.push(我);
});
}
}
}
}）
& lt;/script>
& lt;/html>
之前
如果有错误,请告知!
以上这篇vue全选与反选的实现方法(无Bug新手看过来)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。
