<!DOCTYPE html> <html lang="en"> <head> <title>购物车示例</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="style.css" rel="stylesheet"> </head> <body> <div id="app" v-cloak> <template v-if="list.length"> <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> </template> <div v-else>购物车为空</div> </div> <script src="https://unpkg.com/vue/dist/vue.min.js"></script> <script> var app=new Vue({ el:'#app', data:{ list:[ { id:1, name:'iphone 7', price:6188, count:1 }, { id:2, name:'ipad pro', price:5888, count:1 }, { id:3, name:'MacBook Pro', price:21488, count:1 } ] }, computed:{ //计算属性 totalPrice:function(){ var total=0; for(var i=0;i<this.list.length;i++) { var item=this.list[i]; total+=item.price*item.count; } return total.toString().replace(/\B(?=(\d{3})+$)/g,','); } }, 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) } } }); </script> </body> </html>
相关文章：