实现购物车中带有分类或者店铺名的全选和反选 , 主要用到了watch监听
案例效果截图
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
background-color: #ccc;
}
.dp_title {
background-color: cadetblue;
height: 50px;
line-height: 50px;
color: #ffffff;
}
.dp_item {
margin-left: 20px;
}
</style>
</head>
<body>
<div id="app">
<ul>
<li v-for="(item,index) in list">
<div class="dp_title">
<input
type="checkbox"
v-model="item.flag"
@click="dp_title(item,$event)"
/><span>{{item.title}}</span>
</div>
<div class="dp_item" v-for="(subItem,subIndex) in item.arr">
<input type="checkbox" v-model="subItem.flag" />
<span>{{subItem.name}}</span>
</div>
</li>
</ul>
<div><input type="checkbox" v-model="checkAll" @click="checkAll_click" />全选</div>
</div>
<script src="./vue.js"></script>
<script>
new Vue({
el: "#app",
data: {
checkAll: false,
list: [
{
title: "小智的男装店",
id: 01,
flag: false,
arr: [
{
name: "鞋子",
pid: 3242131,
flag: false,
},
{
name: "帽子",
pid: 23231343,
flag: false,
},
],
},
{
title: "miss的零食店",
id: 02,
flag: false,
arr: [
{
name: "瓜子",
pid: 13123,
flag: false,
},
{
name: "二手车",
pid: 33123,
flag: false,
},
],
},
],
},
watch: {
list: {
deep: true,
handler(newVal, val) {
this.list.forEach((item) => {
let flag =
item.arr.filter((sub_item) => sub_item.flag).length ==
item.arr.length;
if (flag) {
item.flag = flag;
} else {
item.flag = false;
}
});
let dp_checked = this.list.filter((item) => item.flag);
if (dp_checked.length === this.list.length) {
this.checkAll = true;
} else {
this.checkAll = false;
}
},
},
checkAll(newVal, val) {
if (newVal) {
this.list.forEach((item) => {
item.arr.forEach((subItem) => {
subItem.flag = newVal;
});
});
}
},
},
methods: {
dp_title(item, el) {
item.arr.forEach((subItem) => {
subItem.flag = el.target.checked;
});
},
checkAll_click(el){
if(!el.target.checked){
this.list.forEach((item) => {
item.arr.forEach((subItem) => {
subItem.flag =el.target.checked ;
});
});
}
}
}
});
</script>
</body>
</html>
Processed:
0.012, SQL:
9
