前言
喜欢购物的小伙伴看过来,你们期待已久的购物车来啦!相信小伙伴逛淘宝时最擅长的就是加入购物车了,那购物车是如何实现商品全选反选的呢?今天就带你们研究购物车的源码,以vue+vant为例。
正文
首先,成功请求购物车以后,使用数组的map方法,在购物车数组里遍历添加 checked: false 属性,初始化 checkbox 选中状态为未选中
接着,开始进行全选的绑定,实现点击全选checkbox,让所有checkbox状态变为选中,这里我们定义一个数组checkList用来计算商品总价,这里有个小细节,list数组赋给checkList时要采用深拷贝
接着开始处理反选业务,这里的小细节不多说了,直接上代码
结尾
这样,一个完整的购物车业务就写好了,整理不易,喜欢的小伙伴点个关注哈~~