vue购物车php,vue 实现购物车总价计算

效果如下所示：

js

window.οnlοad=function () {

var vm = new Vue({

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 () {

var totalPrice = 0;//临时总价

var best = 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 实现购物车总价计算就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持谷谷点程序。