开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 16 天，点击查看活动详情
因为最近实训，选的应用开发，主要是讲的前端。比如最近的vue使用，突然想起来，能不能做一个购物车部分。具体样式如下
实现功能：
- 点击加入购物车会在下面购物车显示，如果不是第一次加入会增加数量
- 购物车选中变化，总价也会变化
- 通过购物车里面加减按钮控制数量
步骤：
-
先在data里面声明商品数组，包括商品信息，里面包括商品id，商品名字，商品价格，商品数量，如果做选中框需要加入check字段。
-
然后新建一个列表，通过v-for遍历数组，进行页面渲染。
-
通过点击加入购物车，在另外一个购物车数组里面增加数据。
-
新建列表，通过v-for遍历购物车数组，进行页面渲染
-
最后看到总价
我们可以把他拆分一下
展示商品怎么做？ 主要包括，img，商品名字，商品价格，按钮加入购物车。
先根据数据在data里面把数据加上：然后书写出相关的div标签。然后通过button绑定一个事件。
购物车怎么做？ 主要包括：img，商品名字，商品价格，按钮加入购物车。
最后还有一个总价。
加减按钮：
<button @clict=“number++”>+< /button>,<button @clict=“number--”>-< /button>
因为是商品，使用不能为负数，可以 @clict=“number>0?number--:number”
也可以拉出来作为一个函数：@clict=“fun()” fun(){if(number>0){number--}}
总价：
声明一个button并且在数据里面新加一个sum，初始值为0.
在add里面，对购物车进行循环，然后对sum进行赋值。
循环可以通过for，即： for(var ob in carList){}
注：carList就是购物车里面数据。
sum逻辑如下：
加入购物车按钮
声明一个数组，当点击加入购物车时候，触发函数，函数的作用就是把数据加入数组
我们可以看到代码里面有check，其实每一条商品面前，有一个选中框，是比较常见的。
总结：vue是数据驱动的一种，输入这里虽然没有使用数据库，但是我们在data里面声明了数据。对于图片，一般使用绝对路径。 我们可以通过v-for遍历数组，然后通过v-model绑定数据。 可以通过v-on:click="事件处理函数"或者@click="事件处理函数"绑定函数。
对于函数书写，其实和其他语言逻辑一样的。比如计算总价，我们需要看购物车里面的数量和价格，然后给进行累加。使用代码就算，循环遍历数组，取出number*price。
