購物車代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content='width=device-width initial-scale=1.0, user- scalable=no'>
<link rel="stylesheet" href="./bootstrap/css/bootstrap.css">
<title>shopping</title>
</head>
<body>
<div class="container">
<table class="table table-bordered">
<thead >
<tr>
<th class="text-center">編號</th>
<th class="text-center">名稱</th>
<th class="text-center">單價</th>
<th class="text-center">數(shù)量</th>
<th class="text-center">總價</th>
</tr>
</thead>
<tbody class="text-center">
<tr v-for="(value,index) in arr">
<td>{{index+1}}</td>
<td>{{value.two}}</td>
<td>{{value.three}}</td>
<td><button v-on:click='list(index)'>+</button>
<span>{{value.four}}</span>
<button v-on:click='list1(index)'>-</button></td>
<td>{{value.five}}</td>
</tr>
<tr>
<td colspan="5" class="text-center">總計：{{arrs}}.00</td>
</tr>
</tbody>
</table>
</div>
<script src="../vue.js"></script>
<script>
new Vue({
el:'.container',
data:{
arr:[
{two:'香蕉',three:1,four:1,five:1},
{two:'芒果',three:2,four:1,five:2},
{two:'葡萄',three:3,four:1,five:3}
],
arrs:6,
},
methods:{
list:function(ind){
this.arr[ind].four++;
// 小計：
this.arr[ind].five=this.arr[ind].four*this.arr[ind].three;
// 總計：
this.total();
},
list1:function(ind){
if(this.arr[ind].four>1){
this.arr[ind].four--;
}
// 小計：
this.arr[ind].five=this.arr[ind].four*this.arr[ind].three
// 總計
this.total();
},
// 總計：
total:function(){
for(var i=0,tot=0;i<this.arr.length;i++){
tot+=this.arr[i].five;
}
this.arrs=tot;
}
}
})
</script>
</body>
</html>
