位置: 编程技术 - 正文
推荐整理分享Vue实现购物车场景下的应用(用vue做项目加入购物车是怎么做到的),希望有所帮助,仅作参考,欢迎阅读内容。
文章相关热门搜索词:vuex实现购物车功能案例,用vue做项目加入购物车是怎么做到的,vue2 购物车,vuex实现购物车功能案例,vue 实现购物车,vuex实现购物车功能案例,vue购物车实现原理分析,vue购物车实现原理分析,内容如对您有帮助,希望把文章链接给更多的朋友!
本文实例为大家分享了Vue在购物车场景下的应用,供大家参考,具体内容如下
购物车场景需求:
1. 商品、店铺、购物车的选择
2. 商品删除
关键代码
测试数据
店铺对象组成购物车数组 _list商品对象组成店铺对象下的商品数组 goods每个商品和店铺都有自己的 checked 字段
一. 选择商品
选择商品 选择店铺下的所有商品 选择购物车里的所有商品数据绑定
监听购物车全选
当店铺选择数(checkedShopsCount)等于店铺数(list.length)时,购物车全选(checkedAll)为 true商品 & 店铺选择事件
选择购物车时执行 setAllChecked,此时选择所有商品和店铺选择店铺时执行 setGoodChecked,此时选择该店铺下所有商品选择商品时执行 setShopChecked 当商品 checked 为 false 时,取消选择当前店铺 当商品 checked 为 true 时,判断当前店铺是否选择了所有商品,是则选择当前店铺,否则取消选择当前店铺
二、删除商品
全部代码
友情链接: 武汉网站建设