vue 全选与反选的实现方法(无Bug 新手看过来)
程序员文章站
2022-04-23 17:10:31
我就废话不多说，直接上代码吧！
<...
我就废话不多说，直接上代码吧！
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>document</title>
</head>
<body>
<div id="app">
<div style="padding-left: 20px">
<ul style="margin-bottom: 20px">
<li v-for="(item, index) in prodata">
<input type="checkbox" :value="index" v-model="selectarr">{{item.name}}
</li>
</ul>
<label>
<input type="checkbox" @click="selectall" :checked="checked"/>全选
</label>
</div>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script type="text/javascript">
var vm = new vue({
el : "#app",
data : {
prodata: [
{
"name": "张三"
}, {
"name": "李四"
}, {
"name": "王五"
}, {
"name": "赵六"
}
],
selectarr: [],
checked : false
},
watch : {
selectarr(curval){
if(curval.length == this.prodata.length){
this.checked = true
}else{
this.checked = false
}
}
},
methods: {
selectall(event){
if (!event.currenttarget.checked) {
this.selectarr = [];
} else { //实现全选
this.selectarr = [];
this.prodata.foreach((item, i) =>{
this.selectarr.push(i);
});
}
}
}
})
</script>
</html>
如果有bug，请告知！
以上这篇vue 全选与反选的实现方法(无bug 新手看过来)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。
上一篇： IDC：全球AI开支今年或达到191亿美元，同比增长54.2％
下一篇： C/C++_扫雷