题目来源:《Vue.js实战》第五章 5.5 实战:利用计算属性、指令等知识开发购物车
参考链接:https://blog.csdn.net/XJ_18335388352/article/details/84777985
练习一:
在当前示例的基础上扩展商品列表,新增一项是否选中该商品的功能,总价变为只计算选中商品的总价 同时提供一个全选的按钮。
思路:
- 添加input元素,为其属性checked赋予动态变量,变量可在商品属性中增加一个值加以判断.
- 通过判断checked属性的值,确定是否添加计算到总价.
- 全选:也是通过添加input元素和判断checked属性,不同的是,增加其与物品的联系。
- 全选思考:首先是点击全选本身,很容易关联到所有商品的checked属性,在isSelectAll函数中去判断;
其二,是当所有商品全部勾选时,全选需要自动勾选,此处可以在商品的点击函数中去设置判断条件;
其三,全选勾选后,当有一商品取消勾选,全选需自动取消勾选,此处跟其二想法类似。
其二、其三这两点均在isSelectGoods函数中修改.
练习二:
将商品列表list改为一个二维数组来实现商品的分类,比如可分为“电子产品”“生活用品”和“果蔬”, 同类商品聚合在一起。提示,你可能会用到两次v-for。
思路:
- 渲染层面:由于我使用的是table,所以我是通过v-for渲染三个表格table.这里,由于采用的是二维数组存储,需要嵌套 两层v-for,具体用法百度或者看代码.
- 数据层面:data中采用对象的二维数组形式存储.
- js部分:对比与练习一,此处的对于全选方面多了分类和总体的判断.在移除方面,多了一层删除.
- 全选方面和练习一样,一样在isSelectAll函数中进行判断.
- 除了全部商品的全选,还有分类的全选,其思路和总体全选差不多,在isSelectType函数中进行判断.
- 所以,在单个商品的勾选中,在判断全选的范围需