vue3知识点3小案例---购物车的增减

最新推荐文章于 2024-05-22 08:15:00 发布

luanmabug

最新推荐文章于 2024-05-22 08:15:00 发布

阅读量1.1k

点赞数

分类专栏： vue基础文章标签： vue.js vue html5 html mvvm

本文链接：https://blog.csdn.net/yangyangdt/article/details/122021592

版权

本文介绍了使用Vue3实现购物车功能的案例，包括创建商品列表、实时计算总价、双向绑定数量、删除商品以及添加商品。在处理对象引用问题时，通过创建新对象避免了数据同步导致的意外变更。详细代码和数量输入限制的解决方案一并提供。

摘要由CSDN通过智能技术生成

vue3第二章的小案例2—购物车的增减

案例2：商品列表的增减

要求：

1）通过模拟数据先创建一组商品列表

2）所有商品总价格是实时计算当前商品的最终价格

3）当修改每项数量的时候商品总价格发生改变

4）点击每一项的删除按钮的时候当前一项数据删除，同时总价格也发生改变

5）增加一条数据在上面的列表中增加同时总价格发生改变

做法：

分析一下需求：

1）通过模拟数据先创建一组商品列表

商品列表肯定是[{},{},{}]的结构，在视图层表格里遍历即可。

//html
<tr v-for="item,index in goodslist" :key='index'>
						<td>{
  { index+1 }}</td>
						<td>{
  { item.name}}</td>
						<td>{
  { item.price }}</td>
						...
<tr />

//data
data={
	goodslist:[
						{name:'苹果',price:7000,count:0},
						{name:'华为',price:6000,count:0},
						{name:'小米',price:5000,count:0},
						{name:'红米',price:4000,count:0}
					],
}