vue-购物车
Posted BluesQian
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue-购物车相关的知识，希望对你有一定的参考价值。
最终的实现效果：
需求分析：
购物车需要展示一个已加入购物车的商品列表，包含商品名称，商品单价，购买数量和操作等信息，还需要实时显示购买的总价。其中购买数量可以增加或减少，每类商品还可以从购物车中移除。
一：创建一个根元素来挂载Vue实例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>购物车</title> </head> <body> <div id="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-购物车的主要内容，如果未能解决你的问题，请参考以下文章