搭建一个简单的购物车应用

欢迎大家订阅【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}},