好资源导航 » 文章资讯 » vue 实现购物车总价计算

vue 实现购物车总价计算

2023-08-09 18:55:04 79

效果如下所示：



window.οnlοad=function(){
varvm=newVue({
el:'#huo',
data:{
myList:[
{
number:0,
price:23
},
{
number:0,
price:14.5
},
{
number:1,
price:8
},
{
number:0,
price:20
}
],
total:0,//总价
bestValue:0//最贵单价
},
methods:{
//相减
sub:function(item){
item.number--;
if(item.number<=0){
item.number=0
}
this.count()
},
//相加
add:function(item){
item.number++;
this.count()
},
count:function(){
vartotalPrice=0;//临时总价
varbest=0;//临时最大单价
this.myList.forEach(function(val,index){
totalPrice+=val.number*val.price;//累计总价
//判断最大单价
if(val.price>best&&val.number>0){
best=val.price
}
});
this.total=parseFloat(totalPrice);
this.bestValue=parseFloat(best);
}
},
created:function(){
this.count();
}
})
}

html





{{item.number}}

单价：{{item.price}}
小计：{{item.number*item.price}}



总价：{{total}}元
最贵的单价是：{{bestValue}}元

以上这篇vue实现购物车总价计算就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
514930285
czq8825@qq.com

vue 实现购物车总价计算

热门推荐

随机推荐