本文主要是介绍搭建一个简单的购物车应用,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
欢迎大家订阅【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}},
这篇关于搭建一个简单的购物车应用的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!