用Vue实现购物车组件

前言

本实例主要介绍利用Vue实现购物车组件，顶部可以切换标签“全部”、“好评”和“买过”的数据，标签“全部”下还可以切换不同分类显示商品；也可对商品进行加减，并进行跨标签和跨分类的最终价合计；

最终效果：

 

实现过程

一. 子组件代码如下（shoppingCart.vue），原理分析：

1. 切换标签函数toggleType，点击时，赋值this.currentIndex = index，同时利用计算属性更新menu的值，从而实现切换标签数据功能；而this.menuTypeIndex = 0为了解决从多分类到少分类切换报错的问题；

2. 切换分类函数toggleGoods，点击时，赋值this.menuTypeIndex = index，同时利用计算属性更新goods的值，从而实现切换分类数据功能；

3. 添加函数clickAdd，每次点击时，数量加1，同时利用JQ实现一个商品图片从上往下掉落到配送员箱子的过程；然后箱子的数字加1，并增加原价、优惠价和配送费用等；

4. 减少函数clickMinus，每次点击时，数量减1，同时减少原价、优惠价和配送费用等。

二. 父组件代码如下（shoppingCartPage.vue），原理分析：

父组件比较简单，主要用来调用子组件。