vue实战记录（五）- vue实现购物车功能之商品总金额计算和单选全选删除功能...

vue实战记录（五）- vue实现购物车功能之商品总金额计算和单选全选删除功能

vue实战，一步步实现vue购物车功能的过程记录，课程与素材来自慕课网，自己搭建了express本地服务器来请求数据

作者：狐狸家的鱼

本文链接：vue实战-实现购物车功能（五）

GitHub：sueRimn

一、单价商品的金额计算

整个操作过程是，商品的数量是可以控制的，可增可减，最少为1。并且在数量的变化中，商品的总价也在变化。

控制数量与总价的变化需要定义新方法。

页面中的+和-控制数量的变化，当点击的时候调用changeMoney()函数，传递参数，通过数量的变化去改变金额。+的时候增1，-的时候减1。

cart.html

<div class="quantity">
    <!-- 商品数量 -->
   <a href="javascript:void 0" @click="changeMoney(item,-1)">-</a>
   <input type="text" value="0" disabled v-model="item.productQuantity">
   <a href="javascript:void 0" @click="changeMoney(item,1)">+</a>
</div>

cart.js

      changeMoney: function (product,way) {
            if (way > 0){
                product.productQuantity++;
            }else{
                product.productQuantity--;
                if (product.productQuantity < 1) {//限制数量最少为1
                    product.productQuantity = 1;
                }
            }
            this.calcTotalPrice();//每次改变商品数量就调用计算总金额函数
        },

二、单选选中商品

在购物车中，需要选择当前想买的商品，这一功能成为商品的单选，并且在选中商品的同时，总金额会累加上选中的商品总价。

需要绑定单选按钮的选中状态，选中为true，再次点击状态取反。

cart.html

<div class&