频道导航

vuejs手把手教你写一个完整的购物车实例代码

2019-01-07 Vue 前端之家

前端之家收集整理的这篇文章主要介绍了vuejs手把手教你写一个完整的购物车实例代码，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

由于我们公司是主营业务是海淘，所以每个项目都是类似淘宝天猫之类的商城，那么购物车就是一个重点开发功能模块。介于之前我都是用jq来写购物车的，这次就用vuejs来写一个购物车。下面我就从全选，数量控制器，运费，商品金额计算等方法来演示一下一个能用在实际场景的购物车是怎么做出来的以及记录一下这次用vuejs踩过的坑。

1.一层数据结构-全选

下面这段代码和vuejs官网里面checkBox绑定很像。不明白的可以直接上vuejs官网看看。

<Meta charset="UTF-8"> vuejs-全选

全选

商品名称: | 价格:

全选

3.一层数据结构-数量选择器

<Meta charset="UTF-8"> vuejs-<a href="https://www.jb51.cc/tag/shuliang/" target="_blank" class="keywords">数量</a>选择器(1层数据结构)

商品数量：

商品库存：

4.二层数据结构-数据选择器

<Meta charset="UTF-8"> vuejs-<a href="https://www.jb51.cc/tag/shuliang/" target="_blank" class="keywords">数量</a>选择器(2层数据结构)

选择

    </td&gt;
    <td&gt;
      <p><span v-html="data.name"&gt;</span></p>
    </td&gt;
    <td v-html="(data.price).toFixed(2)"&gt;</td&gt;
    <td v-html="(data.fare).toFixed(2)"&gt;</td&gt;
    <td&gt;
      <div class="quantity-selector clearfix"&gt;
        <span class="reduce" v-on:click="numChange(index1,$index,-1)" v-bind:class="{ 'disable' : data.num==1 }"&gt;－</span>
        <input type="number" v-bind:value="data.num" class="number" v-bind:data-realStock="data.realStock" v-on:keyUp="numEntry(index1,$index)" v-on:keyDown="numEntry(index1,$index)" v-model="data.num"/&gt;
        <span class="add" v-on:click="numChange(index1,1)" v-bind:class="{ 'disable' : data.num==data.realStock }"&gt;＋</span>
      </div>
    </td&gt;
    <td&gt;
      <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >删除</a>
    </td&gt;
  </tr&gt;
</tbody>

</table>
<div class="cal-store-Box">

店铺总运费:

店铺商品总金额:

商品总金额:

运费总金额:

5.一个完整的购物车

<Meta charset="UTF-8"> vuejs-<a href="https://www.jb51.cc/tag/shuliang/" target="_blank" class="keywords">数量</a>选择器(2层数据结构)

全选

商品	单价	运费	数量	操作

选择

nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" v-on:click="delGoods(index1,index)">删除 Box">

店铺总运费:

店铺商品总金额:

全选

Box">

商品总运费:

商品总金额:

效果如下：