vue实例之购物车(语法熟练)

之前被一个杠精杠了 首先声明一下实际项目里的vue开发并不是这样的 这个demo仅仅用于vue语法理解 是我早期为了更好德熟练vue所做的练习 编辑器为sublime vue开发还是推荐vscode 创建一个vue项目

今天在网上看见别人的文章里有这个案例，写得特别详细，跟着他一步步做下来，感觉收获挺多的。

先感谢一下原作者，写得是真的好。原文地址

好了，来贴一下，今天辛辛苦苦肝出来的实例吧。还是很有成就感的。比较偷懒用了bootstrap的框架，选择按钮其实是图片的切换。

该购物车的主要功能有，增加购买数量，金额实时变化。选择了要购买的商品后，总金额实时变化。全选和取消全选。删除单个和删除选中商品。

效果图如下

html

	
	
	
	
	
	


	
购物清单
	

		

				

					

					全选
					全选
					
					
商品
					
数量
					
单价(元)
					
金额(元)
					
操作
				
				

					

						
						
					
					

							

							

								
{{goods.name}}
								
品牌：{{goods.brand}}  产地:{{goods.location}}
								
规格/纯度:{{goods.size}}  起定量:{{goods.number}}
								
配送仓储:{{goods.send}}
							
					
					

						-
						
						+
					
					
${{goods.price}}
					
${{goods.num*goods.price}}
					
删除
				
		
		
删除选中商品
		
您挑选了{{getTotal.totalNum}}商品，共计{{getTotal.totalPrice}}元
	

 

js

 

var app = new Vue({
  el: '#app',
  data:{
  	select:false,
  	goodsList:[
  	{
  		name:'可乐',
  		brand:'可口可乐公司',
  		location:'海外',
  		size:'300ml',
  		number:10,
  		send:'海外仓库',
  		price:3,
  		num:2,
  	},
  	{
  		name:'雪碧',
  		brand:'可口可乐公司',
  		location:'海外',
  		size:'270ml',
  		number:10,
  		send:'海外仓库',
  		price:3,
  		num:1,


  	},
  	{
  		name:'芬达',
  		brand:'可口可乐公司',
  		location:'海外',
  		size:'300ml',
  		number:20,
  		send:'海外仓库',
  		price:4,
  		num:4,
  	},
  	{
  		name:'美年达',
  		brand:'可口可乐公司',
  		location:'海外',
  		size:'300ml',
  		number:16,
  		send:'海外仓库',
  		price:2,
  		num:3,
  	},
  	]
  },
   methods:{
   	selectAll:function(){
   		for(var i=0;i