欢迎大家订阅【Vue2+Vue3】入门到实践 专栏，开启你的 Vue 学习之旅！
文章目录
前言
本篇文章详细讲解了如何搭建一个简单的购物车应用，展示了购物车的基本功能，包括商品列表的渲染、商品的删除、数量的修改、全选和反选操作，以及选中商品总价格和总数量的计算。
一、渲染功能
在购物车应用中，核心的数据存储在 data 属性中的 fruitList 数组里。每个商品都有如下属性：
id: 商品唯一标识符icon: 商品的图片路径isChecked: 商品是否被选中num: 商品数量price: 商品单价
data: {
// 水果列表
fruitList: [
{
id: 1,
icon: './photos/西瓜.png',
isChecked: true,
num: 1,
price: 10,
},
{
id: 2,
icon: './photos/牛油果.png',
isChecked: false,
num: 1,
price: 8,
}
}
通过 v-for 指令遍历 fruitList 中的每个商品，并动态生成表格行。
通过 v-model 的双向数据绑定，用户对商品的选择将直接反映在数据模型中，实现了高效的动态界面更新。
<div class="tbody">
<div v-for="(item,index) in fruitList" :key="item.id" class="tr" :class="{active : item.isChecked}">
<div class="td"><input type="checkbox" v-model="item.isChecked" /></div>
<div class="td"><img :src="item.icon" alt="" /></div>
<div class="td">{
{item.price}}</div>
<div class="td">
...
</div>
</div>
</div>
二、删除功能
用户可以通过点击“删除”按钮从购物车中移除商品。
del(id) {
this.fruitList = this.fruitList.filter(item => item.id !== id);
}
在 del 方法中，使用 filter 方法创建一个不包含被删除商品的新数组，并更新 fruitList，从而移除对应的项目。
三、修改功能
用户可以通过增加或减少商品的数量来更新购物车中的内容。
add(id) {
// 查找对应商品
const fruit = this.fruitList.find(item => item.id === id);
// 增加商品数量
fruit.num++;
},
sub(id) {
const fruit = this.fruitList.find(item => item.id === id);
if (fruit.num > 1) {
fruit.num--;
}
}
find 方法会返回数组中第一个满足条件的元素，如果没有找到则返回 undefined。
在 add 方法中，使用 find 方法在 fruitList 数组中查找与传入的 id 匹配的商品，通过 fruit.num++ 将找到的商品的数量 num 增加 1。
在 sub 方法中，在减少数量操作前会先检查商品的数量 num 是否大于 1。只有在数量大于 1 的情况下才会执行 fruit.num--，以防止商品数量变为负值，确保了业务逻辑的正确性。
四、全选反选
购物车允许用户一次性选择或取消选择所有商品。
computed:{
isAll:{
get(){
// 所有小选框被选中，则全选按钮选中
return this.fruitList.every(item=>item.isChecked===true)
},
set(value){
// 基于获取到的布尔值，让所有小选框同步状态
this.fruitList.forEach(item => item.isChecked=value);
}
}
}
every() 方法用于测试一个数组中的所有元素是否都通过给定函数的测试。它返回一个布尔值，表示是否所有元素都满足条件。在 get 方法中，使用 every 检查所有商品的选择状态。
forEach() 方法对数组的每个元素执行一次给定的函数。它不返回结果，仅执行副作用。在 set 方法中，forEach() 被用来同步 fruitList 中每个商品的 isChecked 属性，将 isChecked 属性的值设置为 value，以匹配全选/反选的状态。如果 value 是 true，则表示所有商品将被选中；反之，则表示所有商品将被取消选择。
五、统计价格及数量
购物车可即时计算选中商品的总价和数量。
computed:{
/* 统计选中的总数 → reduce */
totalCount(){
return this.fruitList.reduce((sum,item)=>{
if(item.isChecked){
// 选中 → 需要累加
return sum+item.num
}else{
// 没选中 → 不需要累加
return sum
}
},0)
},
/* 统计选中的总数 */
totalPrice(){
return this.fruitList.reduce((sum,item)=>{
if(item.isChecked){
return sum+item.num*item.price
}else{
return sum
}
},