vue 实现购物车

购物车是电商必备的功能，可以展示出用户购买的多个商品以及价格信息。

最近在做一个电商的项目，使用了vue.框架，一个轻量级的mvvm，数据变化视图一起变化；为了响应式布局，使用了bootstrap。

该购物车的主要功能有，增加购买数量，价格实时变化，可以单选，全选，不选。

页面全选按钮，如果下方按钮均选中则默认选中，有一个没选中就不选

代码的实现函数和注意写在注释和下面的介绍

html

单个商品金额使用{{good.price*good.num}}

数量框中加减的数字使用{{good.num}} 并且使用三元运算符，保证在数量大于0时可以点+ @click="good.num>0?good.num--:0"，其他情况下-按钮不可以点

在实现时使用了两种该方法：

1.使用v-if指令来决定全选按钮的状态

 

					
                	全选
				
				

					
                	全选
				
 

2.methods函数中判断全选按钮状态

		

			

				

					
					
                	全选
				
				
序号
				
图片
				
价格
				
数量
				
金额
			
			
			

				

				
			
			
{{index+1}}
			

				
			
			
{{good.price}}
			

				-{{good.num}}+
			
			
			
{{good.price * good.num}}
			
			

				

				
				

					共选择了{{calc().cnt}}件商品
				
				

					总计{{calc().totalPrice}}
				
			
		
	

javascript

绑定事件

1.使用了v-on:的方式，也可以使用简写@事件名

2.input 单选框选中，不选中使用v-model绑定

css