<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="JS/vue.js"></script>
<style>
table{
width:1200px;
margin:0 auto;
text-align: center;
}
</style>
</head>
<body>
<div id="add">
<table border="1" cellspacing="0">
<thead>
<tr>
<td>編號</td>
<td>名稱</td>
<td>單價</td>
<td>數量</td>
<td>總價</td>
</tr>
</thead>
<tbody>
<tr v-for="(val,index) in arr">
<td>{{index+1}}</td>
<td>{{val.name}}</td>
<td>{{val.uprice}}</td>
<td>
<button v-on:click="jian(index)">-</button>
{{val.case}}
<button v-on:click="jia(index)">+</button>
</td>
<td>{{val.uprice*val.case}}</td>
</tr>
<tr >
<td></td>
<td></td>
<td></td>
<td></td>
<td>總計{{arr1}}</td>
</tr>
</tbody>
</table>
</div>
<script>
new Vue({
el:"#add",
data:{
arr:[
{
name:"香蕉",
uprice:1,
case:0,
price:0
},
{
name:"蘋果",
uprice:2,
case:0,
price:0
},
{
name:"鴨梨",
uprice:3,
case:0,
price:0
}
],
arr1:0
},
methods:{
jian:function(i){
if(this.arr[i].case>=1){
this.arr[i].case-=1,
/* this.arr[i].price=this.arr[i].case*this.arr[i].uprice,*/
this.arr1-=this.arr[i].uprice
}
},
jia:function(i){
this.arr[i].case+=1,
/* this.arr[i].price=this.arr[i].case*this.arr[i].uprice,*/
this.arr1+=this.arr[i].uprice
}
}
})
</script>
</body>
</html>
效果：
QQ截圖20180917112816.png
