vue实例（京东购物车）

今天用vue模仿京东购物车，写了一个简单的购物车，

主要功能有：

1）每一项商品的小计等于商品单价与商品数量的乘积；

2）当商品前面的复选框被选中的时候，计算所有选中的商品的总价和总的数量，该列表项加上一个class显示处于选中状态

3）当点击全选时每一个商品前面的复选框选中，若以处于全选状态则取消全选状态

4）当所有商品被选中时全选复选框处于选中状态

程序思路：

1）利用vue的双向数据绑定，将选中状态的class与复选框的checked绑定的数据绑定一起。

2）判断所有复选框绑定的数据是否全为true，是者让全选框为选中

3）单击加减时商品数量绑定的数据进行加减并计算商品小计

4）给整个层加点击事件计算商品的总价和商品的数量

代码如下：

<div class="body2"><div class="body1"><div class="b_b" @click="Settlement()"><div class="b_top"><div class="check"><input type="checkbox"  class="qx" :checked="off1" @click="all()">全选</div><div class="shoper">商品</div><div class="shoper1">单价</div><div class="shoper2">数量</div><div class="shoper3">小计</div><div class="shoper4">操作</div></div><div class="b_body"><div class="jdzy" v-show="mydata.length!=0"><div><input type="checkbox"  class="qx" :checked="off1"  @click="all()"></div><span></span></div><div class="list"><ul><li v-for="(item,index) in mydata" :class="{active1:item.off}"><input type="checkbox" :checked="item.off" @click="onff(index)"><div class="img1"><img :src="item.url" ></div><span>{{item.title}}</span><div class="danjia">{{item.dan}}</div><div class="jishuan"><div><a href="javascript:;" @click="jian(index)">-</a><input type="text"   v-model="item.nume"  ><a href="javascript:;" @click="add(index)">+</a></div></div><div class="num"><b>{{item.xj}}</b></div><button @click="del(index)">删除</button></li></ul></div><div class="zhongji"><div class="left"><input type="checkbox"   class="qx" :checked="off1"  @click="all()">全选</div><div class="right"><b></b><span>总价<span>{{money}}</span></span><i>已选择<span class="numm">{{num}}</span>件商品</i></div></div></div></div></div></div>

var vm=new Vue({el:'.b_b',data:{mydata:[{"title":"惠普(HP) 幽灵Spectre x360 13-w021TU 13.3英寸超轻薄翻转笔记本","url":"img/download.jpg","dan":"¥7499.00","nume":1,"xj":"¥7499.00","off":false},{"title":"LG Gram（15Z970-G.AA75C）15.6英寸超轻薄笔记本电脑（i7-","url":"img/download-1.jpg","dan":"¥10499.00","nume":1,"xj":"¥10499.00","off":false},{"title":"1LG Gram（15Z970-G.AA52C）15.6英寸超轻薄笔记本电脑（i5-","url":"img/download-2.jpg","dan":"¥8599.00","nume":1,"xj":"¥8599.00","off":false},{"title":"机械革命(MECHREVO)深海泰坦X1 15.6英寸游戏笔记本 i7-7700HQ 8G","url":"img/download-3.jpg","dan":"¥5899.00","nume":1,"xj":"¥5899.00","off":false},{"title":"小米 红米 4X 全网通版 3GB 32GB 磨砂黑 移动联通电信4G手","url":"img/download-4.jpg","dan":"¥959.00","nume":1,"xj":"¥959.00","off":false},{"title":"联想(Lenovo)小新锐7000 15.6英寸游戏笔记本电脑(i5-7300HQ 8G ","url":"img/download-5.jpg","dan":"¥5499.00","nume":1,"xj":"¥5499.00","off":false}],num:0,money:'¥0.00',off1:false},methods:{del:function(index){this.mydata.splice(index,1);},jian:function(index){if(this.mydata[index].nume>1){this.mydata[index].nume--;this.mydata[index].off=true;}  this.mydata[index].xj='¥'+parseInt(this.mydata[index].dan.substr(1))*this.mydata[index].nume+'.00';},add:function(index){if(this.mydata[index].nume<200){this.mydata[index].nume++;this.mydata[index].off=true;}  this.mydata[index].xj='¥'+parseInt(this.mydata[index].dan.substr(1))*this.mydata[index].nume+'.00';},onff:function(index){this.mydata[index].off=!this.mydata[index].off;},all:function(){this.off1?this.off1=false:this.off1=true;if(this.off1){for(var i in this.mydata){this.mydata[i].off=true}}else{for(var i in this.mydata){this.mydata[i].off=false;}}},Settlement:function(){var j=0;var k=0;var a=false;for(var i in this.mydata){if(!this.mydata[i].off){a=true;break;}}a?this.off1=false:this.off1=true;for(var i in this.mydata){if(this.mydata[i].off){j+=Number(this.mydata[i].nume);k+=parseInt(this.mydata[i].xj.substr(1));}}this.num=j;this.money='¥'+k+'.00';} }})