vue.js实现购物车功能2.0版本
在上一个程序中，我只是简单的实现了商品增减时自动计算总金额，在这次的案列中，我增加了全选、反选的功能。
新增了一项是否选中该商品的功能，总价变成只计算选中商品的总结，同时提供一个全选的按钮。
ps:这个完全是我自己想的，中间遇到了些问题。网上很多案例都是把选中与否放在数据的数据结构之中，我觉得这个不符合我们实际的开发情况，于是就一直在想怎么设计数据去控制是否被选中，当然最后解决出来之后就觉得。。。怎么简单还花那么久，没办法，刚入门。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>vue</title> </head> <style type="text/css"> *{list-style: none;} table,tr,td,th{border: 1px solid #000;border-collapse: collapse;} </style> <body> <div id="app"> <table> <thead> <tr> <th><input type="checkbox" name="" :checked="isAll" @click="checkAll()"></th> <th>序号</th> <th>书名</th> <th>单价</th> <th>数量</th> <th>合计</th> </tr> </thead> <tbody> <tr v-for = "(book,index) in goods"> <td><input type="checkbox" v-model="isCheck" :value="book.name" @change="test()"></td> <td>{{index}}</td> <td>{{book.name}}</td> <td>{{book.price}}</td> <td><button @click="minus(index)" :disabled = "book.number===1" >-</button>{{book.number}}<button @click="add(index)">+</button></td> <td>{{book.price*book.number}}</td> </tr> </tbody> </table> <span>被选书目提示：{{isCheck}}</span> <p>总价：{{total}}</p> </div> <script type="text/javascript" src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> <script type="text/javascript"> var app = new Vue({ el:'#app', data:{ goods:[ {name:"vue.js实战",price:80,number:1}, {name:"vue.js权威指南",price:60,number:3}, {name:"vue.js2.0渐进式前端解决方案",price:50,number:2} ], isAll:false,//控制是否全选 total:0,//选中购买的书目的总金额 isCheck:[]//控制哪些记录被选中，选中的话则把那个书的name放到里面来 }, methods:{ minus :function(index){//书目数量减1 this.goods[index].number--; this.calTotal();//减完需要重新计算总金额 }, add:function(index){//书目数量加1 this.goods[index].number++; this.calTotal();//减完需要重新计算总金额 }, checkAll:function(){ if(this.isAll){//实现反选 this.isAll = !this.isAll; this.isCheck = []; }else{//实现全选 this.isAll = true; this.isCheck = []; //全选之后把全部书的name放到isCheck的这个数组里面，代表选中 for(var i = 0;i<this.goods.length;i++){ this.isCheck.push(this.goods[i].name); } } this.calTotal(); }, calTotal:function(){//计算被选中的记录的总金额 this.total = 0; for(var i = 0;i<this.isCheck.length;i++){ var name = this.isCheck[i]; for(var j = 0;j<this.goods.length;j++){ if(this.goods[j].name == name){ this.total += this.goods[j].price * this.goods[j].number; } } } }, test:function(){ //每次选中或者不选中记录都要计算金额 //如果选中的记录有3条代表全部选中了，这时要人为的把全选框选中，当选中的记录少于3条时，把全选框取消 if(this.isCheck.length != this.goods.length){ this.isAll = false; }else{ this.isAll = true; } this.calTotal(); } } }); </script> </body> </html>
