站台建筑网址大全网站
实现功能：全选、单选、购物数量显示、合计价格显示
实现效果如下：
思路：
1.数据要利用写在Postman里面，通过地址来调用Postman里面的数据。
2.写完数据后，给写的数据一个名字，然后加上一个空数组，这样的话我们可以在前面用到我们写的数组，可以利用v-for指令来得到相关数据内容。
3.设置初始状态的选中状态为不选中，给是否选中的值为false就可以。
4.利用计算机属性computed来撰写合计总价格、选中数量以及是否全选。总价格为商品数量*商品单价，总的数量等于各个商品的数量之和。
5.当进行商品数量单选或者全选的时候显示可能会不正常，例如出现01、02这样的情况，这时候我们需要进行转换，确保我们的数量是数值类型。
部分核心代码展示（总价、数量、是否选中）：
computed: {
totalPrice() {
let sum = 0;
for (let item of this.fruitList) {
if (item.isChecked) {
sum += item.num * item.price;
}
}
return sum;
},
totalCount() {
//初始状态数量为0
let count = 0;
for (let item of this.fruitList) {
if (item.isChecked) {
//总数量
count += item.num;
}
}
return count;
},
isAll: {
set(value) {
for (let item of this.fruitList) {
item.isChecked = value;
}
},
get() {
return this.fruitList.every((item) => item.isChecked === true);
}
}
}
最终效果：
