vue仿美团饿了么,实现购物车功能

未点击前,结算按钮未灰色,不能点击状态,

vue仿美团饿了么,实现购物车功能_第1张图片
点击加号后,实现购物车图表高亮,结算按钮高亮,价格计算,弹出减号按钮。
vue仿美团饿了么,实现购物车功能_第2张图片

先说点击的功能,点击加号加1,data中定义变量tot。给按钮绑定事件addShop事件@click="addShop(key)"
这里传入参数key,是因为如果不判断当前点击的对象,会导致所有的类别都会加1,所以要传入参数,当然数据是需要获取,v-for渲染的,(写死的div就不用传参了)。
实现每个食物类别,是在数据中写好了当前食物的数量,初始为0,点击,则当前点击的对象数据currentNum+1,且当前减号的状态showStatus 变为显示。

addShop(key){
		this.tot++;
		this.shopList[key].currentNum++;
		if(this.shopList[key].currentNum > 0){
			this.shopList[key].showStatus = true;
		}
}

同理完成减法。
价格的计算,当前数据发生了改变,只需要把当前的currentNum乘它的价格averagePrice。
必须要用计算属性,如果不是计算属性,会导致每次循环,计算的上一次循环的价格加上第二次循环的,计算数值会错。

totalMoney(){
		let totalMoney = 0;
		for(var i=0;i0){
				totalMoney = totalMoney + Number((this.shopList[i].currentNum)*(this.shopList[i].averagePrice));
			}
		}
		return totalMoney;
	},

高亮显示,主要绑定class或者属性就能实现。

你可能感兴趣的:(购物车,vue,饿了么购物车)