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

发布时间：2020-12-17 02:53:43 所属栏目：百科来源：网络整理

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

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

1.一层数据结构-全选

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

vuejs-全选

全选

商品名称: | 价格:

全选

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

vuejs-数量选择器(1层数据结构)

选择

    </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.一个完整的购物车

vuejs-数量选择器(2层数据结构)

全选

商品	单价	运费	数量	操作

选择

店铺总运费:

店铺商品总金额:

全选

商品总运费:

商品总金额:

效果如下：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

商品	单价	运费	数量	操作