vue實現簡單的購物車功能
阿新 • • 發佈：2018-09-12
src put turn tps html ted lis app content
<!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>
vue實現簡單的購物車功能