vue-demo之简单购物车思路总结

最新推荐文章于 2024-08-12 16:27:11 发布

淮枳

最新推荐文章于 2024-08-12 16:27:11 发布

阅读量2k

点赞数 2

分类专栏： vue

本文链接：https://blog.csdn.net/weixin_40135101/article/details/81509730

版权

本文总结了一个简单的Vue购物车应用的实现过程，包括增加/减少商品、删除商品、计算总价和全选/取消全选功能。在开发中，遇到了如何根据checkbox状态计算总价的问题，通过在JSON数据中添加check属性并监听其变化来动态更新总价。此外，还探讨了使用computed属性与forEach方法的技巧。

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

先上结果图：

1.规划主要功能：增加/减少商品数量，删除商品，计算单件商品总金额，根据勾选项结算总价格，全选/取消全选

2.简单写了一下布局，略过。

3.从数据库里读取数据渲染到页面中。但还没学怎么从数据库读取数据，暂时自己定义一个json，从下面这个json中读取数据。

var shoplist = {
"shop":[{
        shopname:"剃须刀",
        num:2,
        onePrice:1000,
        check:true    				
    },
    {
		shopname:"背包",
		num:4,
		onePrice:200,
		check:true
	},
	{
		shopname:"女装长裤",
		num:1,
		onePrice:170,
		check:true
	},
	{
		shopname:"女装大佬上衣",
		num:3,
		onePrice:300,
		check:false
	}]
}

html渲染数据：（值得一提的是checked属性，因为要根据勾选项结算总价格，实际上checkbox选中功能不会存到数据库，所以在json数据中定义了check属性，通过改变check的值从而计算总价）