<!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>