200行Vue代码的简单购物车示例（小白自学路）

记录自学Vue的历程。可能我掉进了某个坑，欢迎各位指正！

接触前端的童靴，最常见的一个例子就是商城APP开发了。当然我还不会全部，就试着写了一下购物车示例。

首先基本界面如图（注重实际功能，并未进行界面美化。能看就行啦！）

基本界面

功能介绍：1、商店（SHOP）后的添加购物车按钮点击后可以添加购物车数据。2、购物车中商品数量的增加、减少功能，当数量为1时点击减少键，将在购物车中删除该条数据（商品）。3、利用计算属性实现总费用的计算。

其实具体什么地方用 方法 还是 计算属性 我也不是太懂。凭感觉。

下面是代码：

SHOP部分的模板代码

购物车和费用的模板代码

接下来是模拟商品数据（原谅我蹩脚的英语）：

商品数组与购物车数组

现在是在超市（SHOP）选购（添加）商品的逻辑代码：

这里有个小BUG（紫色框框住的地方 index 要改成 v（就是上面 for 循环的 v）），思考一下为什么呗，嘻嘻。

加入购物车代码

框起来的地方我们接下来会有（其实也就是一个++函数）。

购物车中的添加、减少事件代码

接下来是使用 计算属性 计算商品总价。

计算商品总价

是不是很简单0 0