vue 购物车

效果：总计会随着总价的变化而变化，总价随着数量的变化而变化

nnn.png

body部分

编号	名称	单价	数量	总价
{{value.num}}	{{value.uname}}	{{value.price}}	+ {{value.quantity}} -	{{value.total}}
总计:{{arrs}}元

js部分：
new Vue({
el:'#app',
data:{
arr:[
{num:1,uname:'香蕉',price:1,quantity:1,total:1},
{num:2,uname:'苹果',price:2,quantity:1,total:2},
{num:3,uname:'橘子',price:3,quantity:1,total:3}
],
arrs:6
},
methods:{
jia:function(ind){
this.arr[ind].quantity++
this.arr[ind].total=(this.arr[ind].price)this.arr[ind].quantity
this.getTotal()
},
jian:function(index){
if(this.arr[index].quantity>1){
this.arr[index].quantity--
this.arr[index].total=this.arr[index].pricethis.arr[index].quantity
}
this.getTotal()
},
getTotal:function(){
for(var i=0,to=0;i to+=Number(this.arr[i].total)
}
this.arrs=to;
}
}
})

style部分：