Vue简单购物车页面

1. 此功能包含对商品的增加和删除，以及商品购买数量的增加和减少。下图为该功能界面

2. 加入购物车功能。在input标签里首先需要添加一个v-model来确定该input的名称，用于获取input中输入的数据，v-model.number表示此input输入的值为数字型。当点击“加入购物车”按钮，执行addToCart方法。

 在addToCart中首先新建一个对象newgoods用于存储新加入购物车的数据，newgoods中包含四个属性，this.shopName和this.shopMoney获取的是input输入的值，shopName和shopMoney就是v-model设置的input名称。然后判断商品名称和商品单价是否不为空，如果为空就alert提示并结束，如果不为空就使用push()方法把新建对象newgoods添加到goodList数组中。最后this.shopName=""功能为点击加入购物车后把input标签内的内容清空。

 3. 展示购物车商品。使用v-for="(item,index) in goodsList"进行循环输出，goodsList表示要循环的数组、item表示对象、index表示下标索引。然后使用item.id、item.name和item.price遍历输出。

 4. 购物车中数量增加。在增加按钮新增一个点击事件@click="addCart(index)"传入当前点击数据的索引index，然后在methods中增加addCart(id)用以实现此功能，this.goodsList[id].num++当点击增加数量后num的值加一，this.totalMoney +=this.goodsList[id].price 实现增加数量后购物车总价也增加。

5. 购物车中数量减少。在减少按钮新增一个点击事件@click="reduceCart(index)"，该功能的实现与新增一致。

 6.删除购物车商品。