ThinkChat2.0新版上线,更智能更精彩,支持会话、画图、阅读、搜索等,送10W Token,即刻开启你的AI之旅 广告
# 点击加入购物车添加商品 注意:在加入一件商品时,如果这件商品已经在购物车中了,就不需要再重复添加了!!!! ![](https://img.kancloud.cn/e8/40/e840ee23a1a56d87ad7bcb7209a99041_2640x1612.png) 测试一下: ![](https://img.kancloud.cn/b2/5c/b25c0c74a8ed2b0d2e96ee7d367f5103_2764x1660.png) 添加时判断是否已经存在: 判断一个数组中是存在一个值可以使用 `indexOf` 如果返回-1代表不存在! ![](https://img.kancloud.cn/db/7c/db7c14327836678ba1246acaa38b410b_1758x1112.png) # 在购物车中显示所有的商品 ## 先从购物车中取出商品信息 ![](https://img.kancloud.cn/5c/b8/5cb89f33a5fc4f30d44cf53f18112c22_2210x1562.png) ## 先根据ID查询商品 ![](https://img.kancloud.cn/54/7b/547ba39e16067b10356214b5c87f36a8_2834x1646.png) ## 页面中显示数据 在循环商品时,要根据商品ID到购物车对象中去找对应的数量: ![](https://img.kancloud.cn/fd/dd/fddd90952591872ac3ed872ef5ee38ad_2704x1458.png) ## 使用计算属性计算总价 总结:计算属性的好处:当相关的数据发生变化时,计算属性会自动重新计算!!!! 计算总价:如果一个数据是需要计算得到就定义成计算属性,否则定义到 data k 。 ![](https://img.kancloud.cn/70/f7/70f71cff29730212dbeb3aaf72258a0c_1566x1166.png) 把数据绑定(因为 vant 的这个组件默认是以分为单位 ,所以在显示时要*100) ![](https://img.kancloud.cn/9e/43/9e43f7e2e5c102fdc7dcbc4712c79c13_1094x390.png)