<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>购物车</title> </head> <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>{{index+1}}</td> <td>{{item.name}}</td> <td>{{item.price}}</td> <td> <button @click="handleReduce(index)" :disabled="item.count===1">-</button> {{item.count}} <button @click="handleAdd(index)">+</button> </td> <td> <button @click="handleRemove(index)">移除</button> </td> </tr> </tbody> </table> <div>总价：{{totalPrice}}</div> <!-- <div v-else>购物车为空</div> --> </div> </body> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <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 }], }, methods:{ handleReduce:function(index){ if(this.list[index].count===1) return; this.list[index].count--; }, handleAdd:function(index){ this.list[index].count++; }, handleRemove:function(index){ this.list.splice(index,1); } }, computed:{ totalPrice:function(){ var total=0; for(var i=0,len=this.list.length;i<len;i++){ total+=this.list[i].price*this.list[i].count; }
return total.toString().replace(/B(?=(d{3})+$)/g, ','); } } }); </script> </html>