在看vue.js实战的时候笔者留下了一道题:
1. 在当前示例基础上扩展商品列表，新增一项是否选中该商品的功能，总价变为只计算选中商品的总价，同时提供一个全选的按钮。
2. “将商品列表list改成一个二维数组来实现商品的分类，比如可分为”电子产品”，”生活用品”和”果蔬”，同类商品聚合在一起，你可能用到两次v-for。
做出来的效果是这样的：
|思路：
选中商品功能，商品需要添加一个check属性。通过查询商品的check属性判断是否被选中。
总价变为计算选中商品的总价，因此我们可以在 computed计算总价totalPrice加一步验证。商品属性check = true才计算总价。
在全选的时候把商品的check属性都遍历一遍 –> 把商品的check属性都设置为true，并把全选属性 isCheckedAll设置为true表示已经全选。
当单件商品取消选中的时候要把isCheckedAll设置为fasle，表示已经取消全选。
|步骤：
收到的数据是一个二维数组，分别显示商品类别以及商品内容。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16list: [
{
title_name: '电子产品',
content: [
{
id: 1, name: 'iPad Pro', price: 5799, count: 1, check: false,
},
{
id: 2, name: 'iPhone XS ', price: 5089, count: 1, check: false,
},
{
id: 3, name: 'Macbook Pro', price: 13199, count: 1, check: false,
},
]
}
]购物车页面显示商品类别，名称数量以及操作。底部显示总价以及结账。
通过计算属性来显示总价。循环二维数组两次，根据是否选中情况计算总价
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16computed: {
totalPrice: function () {
var total = 0;
for (var i = 0; i < this.list.length; i++) {
var item = this.list[i];
for (var j = 0; j < item.content.length; j++) {
var items = item.content[j];
if (items.check == true) {
total += items.price * items.count;
}
}
}
this.total = total
return total;
}
}单选和全选。实现的原理与全选类似，在选中按钮中绑定checked属性，绑定check属性确定绑定状态
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30check: function (index1, index2) {
if (this.list[index1].content[index2].check) {
this.list[index1].content[index2].check = false;
this.isCheckedAll = false;
}
else {
this.list[index1].content[index2].check = true;
}
},
checkAll: function () {
if (this.isCheckedAll == false) {
for (var i = 0; i < this.list.length; i++) {
var item = this.list[i];
for (var j = 0; j < item.content.length; j++) {
var items = item.content[j];
items.check = true;
}
}
this.isCheckedAll = true;
} else {
for (var i = 0; i < this.list.length; i++) {
var item = this.list[i];
for (var j = 0; j < item.content.length; j++) {
var items = item.content[j];
items.check = false;
}
}
this.isCheckedAll = false;
}
}
所以大致就是这样实现的啦。我把题目的代码放在这里：
https://github.com/FengZeHe/vue.jsPracticalsubject/tree/master/shoppingCar/shop_demo
