用vue实现购物车计算总金额功能

思路就是对购物车中的商品进行循环,商品的数量*单价进行累加

1、实现过程

在商品金额处用胡子语法( {{}} ),调用计算总金额的函数( totalPrice() ),在函数中首先定义初始总金额为0,然后对商品进行循环,累加得总金额

商品金额: {{totalPrice()}}
methods:{
			totalPrice() {
				var totalPrice=0;
				for (var i in this.products){
					totalPrice+=this.products[i].shopPrice * this.products[i].count;
				}
				console.info(totalPrice);
				return totalPrice;
			}
		}

2、效果展示

参考1:(31条消息) vue-购物车商品的添加、删除和计算总金额功能_@Tiramisu的博客-CSDN博客https://blog.csdn.net/qq_46606159/article/details/105011587?utm_medium=distribute.pc_relevant.none-task-blog-2~default~baidujs_baidulandingword~default-1-105011587-blog-100335732.pc_relevant_sortByAnswer&spm=1001.2101.3001.4242.2&utm_relevant_index=4

参考2:怎么在Vue中计算总价 - tatol - 博客园 (cnblogs.com)https://www.cnblogs.com/187389tian/p/16210931.html

  • 1
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值