vue 購物車練習
阿新 • • 發佈：2018-01-11
sheet 創建 opened gnu ide boot 功能 splay blank 
本人看了vue官網上的教程後，感覺對vue的了解不是很清楚，決定動手練習個小功能項目，就找了購物車本項目。
原文鏈接：http://blog.csdn.net/take_dream_as_horse/article/details/69942013
就找了這個小項目練習，在原項目的基礎上自己完善了一些功能，增加了統計選中商品，合計金額，修改商品金額自動計算，增加商品列表到商品列，加入購物車選項變化，刪除商品列表。目前就做了這些改動，就是當練習。
源碼：shopping_cart.js
1 //var newProduct = {name:‘‘,color:‘‘,price:0,amount:0,default_nums:1,add_nums:0,ischange:‘btn-danger‘};View Code2 // 商品列表json 3 var goodsTable = new Vue({ 4 el: ‘#goods-table‘, 5 data: { 6 // 用於保存每件商品的對象 7 goodItem: {}, 8 // 用於保存用戶添加到購車的商品數組 9 buyLists: [], 10 // 默認的商品列表 11 goods: [ 12 {name:‘iphone 7 plus 手機‘,color:‘銀色‘,price:100,amount:0,default_nums:1,add_nums:0,ischange:‘btn-danger‘},13 {name:‘華碩筆記本電腦‘,color:‘黑色‘,price:100,amount:0,default_nums:1,add_nums:0,ischange:‘btn-danger‘}, 14 {name:‘九陽電熱水瓶5L‘,color:‘白色‘,price:100,amount:0,default_nums:1,add_nums:0,ischange:‘btn-danger‘} 15 ], 16 //用於增加新商品到列表 17 newProduct: {name:‘‘,color:‘‘,price:0,amount:0,default_nums:1,add_nums:0,ischange:‘btn-danger‘}18 }, 19 computed: { 20 count: function(){ 21 var num = 0; 22 for(var i in this.goods){ 23 num += parseInt(this.goods[i].default_nums); 24 } 25 return num; 26 }, 27 total: function() { 28 var total = 0; 29 for(var i in this.goods){ 30 total += parseInt(this.goods[i].price * this.goods[i].default_nums); 31 } 32 return total; 33 }, 34 addShoppingNum: function(){ 35 var addShoppingNum = 0; 36 for(var i in this.goods){ 37 addShoppingNum += this.goods[i].add_nums; 38 } 39 return addShoppingNum; 40 }, 41 costPaid: function(){ 42 var costPaid = 0; 43 for(var i in this.goods){ 44 costPaid += parseInt(this.goods[i].price * this.goods[i].add_nums); 45 } 46 return costPaid; 47 } 48 }, 49 methods: { 50 reduce: function(good) { 51 if (good.default_nums <= 1) return; 52 good.default_nums --; 53 good.ischange = ‘btn-danger‘; 54 }, 55 addNum: function(good) { 56 good.default_nums += 1; 57 good.ischange = ‘btn-danger‘; 58 }, 59 addProduct: function() { 60 //var len = this.goods.length; 61 //追加商品 62 //this.goods.push(Object.assign({},this.goods[len-1])); 63 this.goods.push(Object.assign({}, this.newProduct)); 64 }, 65 removeProduct: function(good,index) { 66 //刪除商品 67 this.goods.splice(index,1); 68 }, 69 addToCar(good) { 70 if(good.add_nums == good.default_nums) return; 71 good.add_nums = good.default_nums; 72 good.ischange = ‘btn-success‘; 73 this.goodItem = {name: good.name, nums: good.add_nums}; 74 // 創建用戶當前添加的商品對象 75 // 開始向數組中提添加當前物品，這裏存在3種情況 76 // 1、用戶未添加過該商品，則直接向數組中push 77 // 2、用於已經添加了該商品、並且未做購買數量修改，則不向數組中添加 78 // 3、用於已經添加了該商品、但是修改了購買數量，直接替換數組中的該商品對象 79 var index = this.buyLists.findIndex((value, index, arr) => { 80 return value.name === this.goodItem.name; 81 }); 82 //Object.assign() 方法用於將所有可枚舉屬性的值從一個或多個源對象復制到目標對象。它將返回目標對象。 83 index === -1 ? this.buyLists.push(this.goodItem) : Object.assign(this.buyLists[index], this.goodItem); 84 }, 85 balance() { 86 console.log(this.buyLists); 87 } 88 } 89 })
源碼：shopping_cart.js
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>添加購物車商品列表</title> 5 <meta charset="utf-8" /> 6 <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" /> 7 <style type="text/css"> 8 [v-cloak]{ /*防止頁面閃爍*/ 9 display: none !important; 10 } 11 .content{ 12 width: 1000px; 13 margin: 100px auto; 14 } 15 .sWidth{ 16 width:50px; 17 } 18 </style> 19 </head> 20 <body> 21 22 <div class="content"> 23 <!-- 商品列表 --> 24 <table class="table table-bordered" id="goods-table" v-cloak> 25 <thead> 26 <th>序號</th> 27 <th>商品名稱</th> 28 <th>顏色</th> 29 <th>數量</th> 30 <th>單價</th> 31 <th>金額</th> 32 <th>操作</th> 33 </thead> 34 <tbody> 35 <tr v-for="(good, index) in goods"> 36 <td>{{ index+1 }}</td> 37 <td><input v-model="good.name"></td> 38 <td><input class="sWidth" v-model="good.color"></td> 39 <td> 40 <button v-on:click="reduce(good)">-</button> 41 <input type="text" type="number" v-model="good.default_nums"/> 42 <button v-on:click="addNum(good)">+</button> 43 </td> 44 <td> 45 <input class="sWidth" v-model="good.price"></span> 46 </td> 47 <td> 48 <span>{{good.price*good.default_nums}}</span> 49 </td> 50 <td> 51 <button class="btn btn-sm" v-bind:class="good.ischange" v-on:click="addToCar(good)">加入購物車</button> 52 <span>已加入購物車的該商品數量:</span> 53 <span>{{good.add_nums}}</span> 54 <button class="btn btn-sm btn-danger" v-on:click="removeProduct(good,index)">刪除</button> 55 </td> 56 </tr> 57 </tbody> 58 <tfoot> 59 <tr> 60 <td colspan="7"> 61 <button class="btn btn-danger" v-on:click="addProduct()">添加商品</button> 62 <span>合計數量{{count}}件</span> 63 <span>合計金額{{total}}元</span> 64 <b>||</b> 65 <span>購物車{{addShoppingNum}}件</span> 66 <span>花費{{costPaid}}元</span> 67 <button class="btn btn-danger pull-right" v-on:click="balance()">結算</button> 68 </td> 69 </tr> 70 </tfoot> 71 </table> 72 </div> 73 <!-- js --> 74 <script type="text/javascript" src="js/vue.js"></script> 75 <script type="text/javascript" src="js/shopping_cart.js"></script> 76 77 </body> 78 </html>View Code
頁面顯示效果：
github地址：https://github.com/double2018/shopping_cart/
vue 購物車練習