Vue|Vue实现购物车全选及价格计算
【Vue|Vue实现购物车全选及价格计算】《vuejs实战》这本书中5.5是一道实战题：利用计算属性、指令等知识开发购物车。
练习1：在当前示例基础上扩展商品列表，新增一项是否选中该商品的功能，总价变为只计算选中商品的总价，同时提供一个全选的按钮。
练习2：将商品列表list改为一个二维数组来实现商品的分类，比如可分为“电子产品” “生活用品” 和“果蔬”，同类商品聚合在一起。提示，你可能会用到两次v-for。
1、购物车
Document - 锐客网 [v-cloak] {
display: none;
}
table{
border: 1px solid #e9e9e9;
border-collapse: collapse;
border-spacing: 0;
empty-cells: show;
padding: 10px;
}
th, td{
border: 1px solid #e9e9e9;
text-align: left;
padding: 10px;
}
th{
background: #f7f7f7;
color: #5c6b77;
font-weight: 600;
white-space: nowrap;
padding: 10px;
}
全选
编号
商品名称
商品单价
购买数量
操作
{{ index + 1}}
{{ item.name }}
{{ item.price }}
{{ item.count }}
总价：￥{{ totalPrice }}
购物车为空
2、二维数组
Document - 锐客网 [v-cloak] {
display: none;
}
table{
border: 1px solid #e9e9e9;
border-collapse: collapse;
border-spacing: 0;
empty-cells: show;
}
th, td{
border: 1px solid #e9e9e9;
text-align: left;
padding: 5px;
}
th{
background: #f7f7f7;
color: #5c6b77;
font-weight: 600;
white-space: nowrap;
padding: 5px;
}
全选
类型
商品名称
编号
商品单价
购买数量
操作
{{ num(index) }}
{{ initem.id }}
{{ initem.name }}
{{ initem.price }}
{{ initem.count }}
总价：￥{{ totalPrice }}
购物车为空
推荐阅读
- vue-cli|vue-cli 3.x vue.config.js 配置
- 2020-04-07vue中Axios的封装和API接口的管理
- 关于QueryWrapper|关于QueryWrapper,实现MybatisPlus多表关联查询方式
- MybatisPlus使用queryWrapper如何实现复杂查询
- python学习之|python学习之 实现QQ自动发送消息
- 孩子不是实现父母欲望的工具——林哈夫
- opencv|opencv C++模板匹配的简单实现
- Node.js中readline模块实现终端输入
- java中如何实现重建二叉树
- 人脸识别|【人脸识别系列】| 实现自动化妆