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&