vue 购物车

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

nnn.png

body部分
<div id="app">
<table border='1' cellspacing='0'>
<thead>
<tr>
<th>编号</th>
<th>名称</th>
<th>单价</th>
<th>数量</th>
<th>总价</th>
</tr>
</thead>
<tbody>
<tr v-for='(value,index) in arr'>
<td>{{value.num}}</td>
<td>{{value.uname}}</td>
<td>{{value.price}}</td>
<td>
<button v-on:click='jia(index)'>+</button>
{{value.quantity}}
<button v-on:click='jian(index)'>-</button>
</td>
<td>{{value.total}}</td>
</tr>
<tr>
<td colspan='5' style='text-align:center;'>总计:<span>{{arrs}}</span>元</td>
</tr>
</tbody>
</table>
</div>

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<this.arr.length;i++){
to+=Number(this.arr[i].total)
}
this.arrs=to;
}
}
})

style部分：
<style>
th,td{
border:1px solid #000;
width:100px;
height:30px;
text-align: center;
}
</style>