智慧商城:封装getters实现动态统计 + 全选反选功能

封装getters实现动态统计

在store文件夹下的modules文件夹下的 cart.js模块中,在getters中,计算所有购物车列表中商品总数,选中的商品数,选中的总数,选中的总价

总价优化:保留两位小数

没有选中任何商品时,"结算"按钮应不高亮才是

在结算和删除中,如果选中的商品数为0,应该加上disabled类,

全选反选功能

为复选框添加点击事件 ,小选控制大选(小的全选中了,大的才会选中)

如果发现state中cartList中的项跟点击传递过来的goodsId一样,则将state中的isChecked信息取反

如果每个商品都选选中了,那么才会需要全选,否则不需要

页面中映射渲染

大选控制小选 (点击全选然后每项都选中)
为全选框注册点击事件,将每个子选框状态取反

每个子选框是否全选中映射为 isAllChecked,现在为全选中框架注册点击事件toggleAllCheck,将是否全选中isAllChecked状态取反传递到vuex中,将每一项子选框状态改为isAllChecked的取反状态

相关推荐
华仔啊12 分钟前
JavaScript 如何准确判断数据类型?5 种方法深度对比
前端·javascript
listhi52015 分钟前
对LeNet-5的matlab实现,识别MINST手写数字集
开发语言·matlab
qq_4335545418 分钟前
C++ manacher(求解回文串问题)
开发语言·c++·算法
csbysj202024 分钟前
Chart.js 饼图:全面解析与实例教程
开发语言
浩瀚地学31 分钟前
【Java】常用API(二)
java·开发语言·经验分享·笔记·学习
程序员小寒31 分钟前
从一道前端面试题,谈 JS 对象存储特点和运算符执行顺序
开发语言·前端·javascript·面试
七夜zippoe42 分钟前
事件驱动架构:构建高并发松耦合系统的Python实战
开发语言·python·架构·eda·事件驱动
古城小栈1 小时前
Rust Trait 敲黑板
开发语言·rust
爱健身的小刘同学1 小时前
Vue 3 + Leaflet 地图可视化
前端·javascript·vue.js
神秘的猪头1 小时前
Ajax 数据请求:从零开始掌握异步通信
前端·javascript