vue 購物車練習

時間 2019-12-05

標籤 vue 購物車練習简体版

原文原文鏈接

本人看了vue官網上的教程後，感受對vue的依稀有點了解，決定動手練習個小功能項目，就找了購物車本項目。

原文連接：http://blog.csdn.net/take_dream_as_horse/article/details/69942013
就找了這個小項目練習，在原項目的基礎上作了以下進一步完善
1.增長了商品數量，合計金額(computed計算屬性)
2.修改商品單價合計金額同步變化，增長商品(v-model)，
3.增減商品數量(methods)
4.綁定button class背景，根據商品是否已經加入到購物車，動態顯示button背景（就是v-bind:class的實際應用）。
5.刪除單列商品(object.splice(index,1))
6.添加商品到商品列(對象淺拷貝用到的是object.assign({},obj),深拷貝var obj = JSON.stringify(this.newProduct);this.goods.push(JSON.parse(obj));//深拷貝)javascript

。目前就作了這些改動，就是當練習。css

源碼：shopping_cart.jshtml

 1 //var newProduct = {name:'',color:'',price:0,amount:0,default_nums:1,add_nums:0,ischange:'btn-danger'};
 2 // 商品列表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},
13         {name:'華碩筆記本電腦',color:'黑色',price:100,amount:0,default_nums:1,add_nums:0},
14         {name:'九陽電熱水瓶5L',color:'白色',price:100,amount:0,default_nums:1,add_nums:0}
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       var obj = JSON.stringify(this.newProduct);
65       this.goods.push(JSON.parse(obj));//深拷貝
66     },
67     removeProduct: function(good,index) {
68       //刪除商品
69       this.goods.splice(index,1);
70     },
71       addToCar(good) {
72           if(good.add_nums == good.default_nums) return;
73           good.add_nums = good.default_nums;
74       //good.ischange = 'btn-success';
75       this.goodItem = {name: good.name, nums: good.add_nums};
76       // 建立用戶當前添加的商品對象
77           // 開始向數組中提添加當前物品，這裏存在3種狀況
78       // 一、用戶未添加過該商品，則直接向數組中push
79       // 二、用於已經添加了該商品、而且未作購買數量修改，則不向數組中添加
80       // 三、用於已經添加了該商品、可是修改了購買數量，直接替換數組中的該商品對象
81       var index = this.buyLists.findIndex((value, index, arr) => {
82          return value.name === this.goodItem.name;
83       });
84       //Object.assign() 方法用於將全部可枚舉屬性的值從一個或多個源對象複製到目標對象。它將返回目標對象。
85       index === -1 ? this.buyLists.push(this.goodItem) : Object.assign(this.buyLists[index], this.goodItem);
86     }, 
87     balance() {
88       console.log(this.buyLists);
89     }
90   }
91 })

View Code

源碼：shopping_cart.htmlvue

 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.default_nums == good.add_nums ? 'btn-success' : 'btn-danger'" 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

頁面顯示效果：java

github地址：https://github.com/double2018/shopping_cart/git

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。