Vue实现购物车场景下的应用

来源：互联网 2023-03-16 23:57:21 版权归原作者所有，如有侵权，请联系我们

购物车场景需求：

1. 商品、店铺、购物车的选择

2. 商品删除

关键代码

工具/原料

JavaScript

方法/步骤

测试数据。

Vue实现购物车场景下的应用

店铺对象组成购物车数组 _list商品对象组成店铺对象下的商品数组 goods每个商品和店铺都有自己的 checked 字段

一. 选择商品

1、选择商品

2、选择店铺下的所有商品

3、选择购物车里的所有商品

Vue实现购物车场景下的应用

监听购物车全选

Vue实现购物车场景下的应用

当店铺选择数（checkedShopsCount）等于店铺数（list.length）时，购物车全选（checkedAll）为 true商品 & 店铺选择事件

Vue实现购物车场景下的应用

选择购物车时执行 setAllChecked，此时选择所有商品和店铺选择店铺时执行 setGoodChecked，此时选择该店铺下所有商品选择商品时执行 setShopChecked当商品 checked 为 false 时，取消选择当前店铺当商品 checked 为 true 时，判断当前店铺是否选择了所有商品，是则选择当前店铺，否则取消选择当前店铺

二、删除商品

Vue实现购物车场景下的应用