《Vue.js实战》购物车案例（包含全选、分类、删除）

题目来源：《Vue.js实战》第五章 5.5 实战：利用计算属性、指令等知识开发购物车

参考链接：https://blog.csdn.net/XJ_18335388352/article/details/84777985

展示效果链接：https://loaln.github.io/vue_practice/html/shop.html

购物车案例实现效果​​​​​

练习一：

在当前示例的基础上扩展商品列表，新增一项是否选中该商品的功能，总价变为只计算选中商品的总价 同时提供一个全选的按钮。

思路：

1. 添加input元素，为其属性checked赋予动态变量，变量可在商品属性中增加一个值加以判断.
2. 通过判断checked属性的值，确定是否添加计算到总价.
3. 全选：也是通过添加input元素和判断checked属性，不同的是，增加其与物品的联系。
4. 全选思考：首先是点击全选本身，很容易关联到所有商品的checked属性，在isSelectAll函数中去判断；
   其二，是当所有商品全部勾选时，全选需要自动勾选，此处可以在商品的点击函数中去设置判断条件；
   其三，全选勾选后，当有一商品取消勾选，全选需自动取消勾选，此处跟其二想法类似。
   其二、其三这两点均在isSelectGoods函数中修改.

练习二：

将商品列表list改为一个二维数组来实现商品的分类，比如可分为“电子产品”“生活用品”和“果蔬”， 同类商品聚合在一起。提示，你可能会用到两次v-for。

思路：

1. 渲染层面:由于我使用的是table,所以我是通过v-for渲染三个表格table.这里,由于采用的是二维数组存储,需要嵌套 两层v-for,具体用法百度或者看代码.
2. 数据层面:data中采用对象的二维数组形式存储.
3. js部分:对比与练习一,此处的对于全选方面多了分类和总体的判断.在移除方面,多了一层删除.

• 全选方面和练习一样,一样在isSelectAll函