vue实例（京东购物车）

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

主要功能有：

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

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

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

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

程序思路：

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

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

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

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

代码如下：

		

			

				

					

						全选
					
					
商品
					
单价
					
数量
					
小计
					
操作
				
				

					

						

							
						
						
					
					

						

							

							
							

								
							
							{{item.title}}
							

								{{item.dan}}
							
							

								

									-
									
									+
								
							
							

								{{item.xj}}
							
							删除
							
						
					
					

						

							
							全选
						
						

							
							总价{{money}}
							已选择{{num}}件商品
						
					
				
			
		
	

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';
			}
		 }
	})