vue-購物車
阿新 • • 發佈：2017-12-02
back center func image 完成 span gin fun temp
最終的實現效果：
需求分析：
購物車需要展示一個已加入購物車的商品列表，包含商品名稱，商品單價，購買數量和操作等信息，還需要實時顯示購買的總價。其中購買數量可以增加或減少，每類商品還可以從購物車中移除。
一：創建一個根元素來掛載Vue實例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>購物車</title> </head> <body> <divid="app" v-cloak> </div> <script src="vue.min.js"></script> <script> var app = new Vue({ el:"#app", data:{ } }) </script> </body> </html>
這裏將vue.min.js寫在<body>的底部，如果寫在<head>裏，Vue實例將無法創建，因為此時DOM還沒有被解析完成。
二：
將界面渲染出來
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>購物車</title> <style> [v-cloak]{ display: none; } table{ border: 1px solid #e9e9e9; border-collapse: collapse; border-spacing: 0; empty-cells: show; } th,td{ padding: 8px 16px; border: 1px solid #e9e9e9; text-align: center; } th{ background: #f7f7f7; color: #5c6b77; font-weight: bold; white-space: nowrap; } </style> </head> <body> <div id="app" v-cloak> <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>-</button> {{item.count}} <button>+</button> </td> <td> <button>移除</button> </td> </tr> </tbody> </table> </div> <script src="vue.min.js"></script> <script> var app = new Vue({ el:"#app", data:{ list:[ {id:1,name:"huawei",price:2199,count:1}, {id:2,name:"MI",price:199,count:1}, {id:3,name:"yijia",price:1199,count:1}, {id:4,name:"meizu",price:1299,count:1} ] } }) </script> </body> </html>
這一步可以將表格渲染出來，接下來開始操作功能
三：
增加和減少商品數量
<td> <button @click="handleReduce(index)">-</button> {{item.count}} <button @click="handleAdd(index)">+</button> </td>
handleReduce:function (index) { this.list[index].count--; }, handleAdd:function (index) { this.list[index].count++; }
當數量為0的時候，不再減少，可以按鈕還需要這樣：
<button @click="handleReduce(index)" :disabled="item.count === 0">-</button>
移除功能：
<button @click="handleRemove(index)">移除</button>
handleRemove:function (index) { this.list.splice(index,1) }
四：
再做一個總價得功能
<div>{{totalPrice}}</div>
computed:{ totalPrice:function () { var sunm=0; for(var i=0;i<this.list.length;i++){ sunm+=this.list[i].count*this.list[i].price } return sunm } }
基本實現
源碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue</title> <style> [v-cloak]{ display: none; } table{ border: 1px solid #e9e9e9; border-collapse: collapse; border-spacing: 0; empty-cells: show; } th,td{ padding: 8px 16px; border: 1px solid #e9e9e9; text-align: center; } th{ background: #f7f7f7; color: #5c6b77; font-weight: bold; white-space: nowrap; } </style> </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="vue.min.js"></script> <script> var app = new Vue({ el:"#app", data:{ list:[ {id:1,name:‘iphone‘,price:6188,count:1}, {id:2,name:‘iphone7‘,price:6188,count:1}, {id:3,name:‘iphone8‘,price:6188,count:1}, {id:4,name:‘iphone9‘,price:6188,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>
vue-購物車