本人看了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));//深拷贝)
。目前就做了这些改动，就是当练习。
源码：shopping_cart.js
1 1 //var newProduct = {name:'',color:'',price:0,amount:0,default_nums:1,add_nums:0,ischange:'btn-danger'}; 2 2 // 商品列表json 3 3 var goodsTable = new Vue({ 4 4 el: '#goods-table', 5 5 data: { 6 6 // 用于保存每件商品的对象 7 7 goodItem: {}, 8 8 // 用于保存用户添加到购车的商品数组 9 9 buyLists: [], 1010 // 默认的商品列表 1111 goods: [ 1212 {name:'iphone 7 plus 手机',color:'银色',price:100,amount:0,default_nums:1,add_nums:0}, 1313 {name:'华硕笔记本电脑',color:'黑色',price:100,amount:0,default_nums:1,add_nums:0}, 1414 {name:'九阳电热水瓶5L',color:'白色',price:100,amount:0,default_nums:1,add_nums:0} 1515 ], 1616 //用于增加新商品到列表 1717 newProduct: {name:'',color:'',price:0,amount:0,default_nums:1,add_nums:0,ischange:'btn-danger'}, 1818 }, 1919 computed: { 2020 count: function() { 2121 var num = 0; 2222 for(var i in this.goods){ 2323 num += parseInt(this.goods[i].default_nums); 2424 } 2525 return num; 2626 }, 2727 total: function() { 2828 var total = 0; 2929 for(var i in this.goods){ 3030 total += parseInt(this.goods[i].price * this.goods[i].default_nums); 3131 } 3232 return total; 3333 }, 3434 addShoppingNum: function() { 3535 var addShoppingNum = 0; 3636 for(var i in this.goods){ 3737 addShoppingNum += this.goods[i].add_nums; 3838 } 3939 return addShoppingNum; 4040 }, 4141 costPaid: function() { 4242 var costPaid = 0; 4343 for(var i in this.goods){ 4444 costPaid += parseInt(this.goods[i].price * this.goods[i].add_nums); 4545 } 4646 return costPaid; 4747 } 4848 }, 4949 methods: { 5050 reduce: function(good) { 5151 if (good.default_nums <= 1) return; 5252 good.default_nums --; 5353 //good.ischange = 'btn-danger'; 5454 }, 5555 addNum: function(good) { 5656 good.default_nums += 1; 5757 //good.ischange = 'btn-danger'; 5858 }, 5959 addProduct: function() { 6060 //var len = this.goods.length; 6161 //追加商品 6262 //this.goods.push(Object.assign({},this.goods[len-1]));//浅拷贝 6363 //this.goods.push(Object.assign({}, this.newProduct));//浅拷贝 6464 var obj = JSON.stringify(this.newProduct); 6565 this.goods.push(JSON.parse(obj));//深拷贝 6666 }, 6767 removeProduct: function(good,index) { 6868 //删除商品 6969 this.goods.splice(index,1); 7070 }, 7171 addToCar(good) { 7272 if(good.add_nums == good.default_nums) return; 7373 good.add_nums = good.default_nums; 7474 //good.ischange = 'btn-success'; 7575 this.goodItem = {name: good.name, nums: good.add_nums}; 7676 // 创建用户当前添加的商品对象 7777 // 开始向数组中提添加当前物品，这里存在3种情况 7878 // 1、用户未添加过该商品，则直接向数组中push 7979 // 2、用于已经添加了该商品、并且未做购买数量修改，则不向数组中添加 8080 // 3、用于已经添加了该商品、但是修改了购买数量，直接替换数组中的该商品对象 8181 var index = this.buyLists.findIndex((value, index, arr) => { 8282 return value.name === this.goodItem.name; 8383 }); 8484 //Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。 8585 index === -1 ? this.buyLists.push(this.goodItem) : Object.assign(this.buyLists[index], this.goodItem); 8686 }, 8787 balance() { 8888 console.log(this.buyLists); 8989 } 9090 } 9191 })
View Code
源码：shopping_cart.html
1 1 <!DOCTYPE html> 2 2 <html> 3 3 <head> 4 4 <title>添加购物车商品列表</title> 5 5 <meta charset="utf-8" /> 6 6 <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" /> 7 7 <style type="text/css"> 8 8 [v-cloak]{ /*防止页面闪烁*/ 9 9 display: none !important; 1010 } 1111 .content{ 1212 width: 1000px; 1313 margin: 100px auto; 1414 } 1515 .sWidth{ 1616 width:50px; 1717 } 1818 </style> 1919 </head> 2020 <body> 2121 2222 <div class="content"> 2323 <!-- 商品列表 --> 2424 <table class="table table-bordered" id="goods-table" v-cloak> 2525 <thead> 2626 <th>序号</th> 2727 <th>商品名称</th> 2828 <th>颜色</th> 2929 <th>数量</th> 3030 <th>单价</th> 3131 <th>金额</th> 3232 <th>操作</th> 3333 </thead> 3434 <tbody> 3535 <tr v-for="(good, index) in goods"> 3636 <td>{{ index+1 }}</td> 3737 <td><input v-model="good.name"></td> 3838 <td><input class="sWidth" v-model="good.color"></td> 3939 <td> 4040 <button v-on:click="reduce(good)">-</button> 4141 <input type="text" type="number" v-model="good.default_nums"/> 4242 <button v-on:click="addNum(good)">+</button> 4343 </td> 4444 <td> 4545 <input class="sWidth" v-model="good.price"></span> 4646 </td> 4747 <td> 4848 <span>{{good.price*good.default_nums}}</span> 4949 </td> 5050 <td> 5151 <button class="btn btn-sm" v-bind:class="good.default_nums == good.add_nums ? 'btn-success' : 'btn-danger'" v-on:click="addToCar(good)">加入购物车</button> 5252 <span>已加入购物车的该商品数量:</span> 5353 <span>{{good.add_nums}}</span> 5454 <button class="btn btn-sm btn-danger" v-on:click="removeProduct(good,index)">删除</button> 5555 </td> 5656 </tr> 5757 </tbody> 5858 <tfoot> 5959 <tr> 6060 <td colspan="7"> 6161 <button class="btn btn-danger" v-on:click="addProduct()">添加商品</button> 6262 <span>合计数量{{count}}件</span> 6363 <span>合计金额{{total}}元</span> 6464 <b>||</b> 6565 <span>购物车{{addShoppingNum}}件</span> 6666 <span>花费{{costPaid}}元</span> 6767 <button class="btn btn-danger pull-right" v-on:click="balance()">结算</button> 6868 </td> 6969 </tr> 7070 </tfoot> 7171 </table> 7272 </div> 7373 <!-- js --> 7474 <script type="text/javascript" src="js/vue.js"></script> 7575 <script type="text/javascript" src="js/shopping_cart.js"></script> 7676 7777 </body> 7878 </html>
View Code
页面显示效果：
