<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<body>
<div id="app">
<table>
<thead>
<tr>
<th>序号</th>
<th>商品名称</th>
<th>商品单价</th>
<th>购买数量</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="(item,index) in list">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.price}}</td>
<td> <button @click="res(index)" v-bind:disabled="item.count===0">-</button>{{item.count}}<button @click="add(index)">+</button> </td>
<td> <button @click="del(index)">删除</button> </td>
</tr>
</tbody>
</table>
购物车总价：{{total}}
</div>
</body>
<script type="text/javascript">
var vue=new Vue({
el:"#app",
data:{
list:[
{id:1,name:'iphone 7',price:6188,count:1},
{id:2,name:'iphone 8',price:7188,count:1},
{id:3,name:'iphone X',price:8188,count:1}
],
},
computed:{
total:function(){
var t=0;
for(var i=0;i<this.list.length;i++){
t+=this.list[i].price*this.list[i].count;
}
return t;//价钱*数量
},
},
methods:{
add:function(index){
this.list[index].count++;
},
res:function(index){
this.list[index].count--;
},
del(index){
this.list.splice(index,1);//arrayObject.splice(index，count) 删除数组中的值
},
},
});
</script>
</html>
