VUE购物车小案例—vue指令的综合应用

需求：

运用Vue基础指令知识实现小小购物车：

涉及到的指令有：v-for、v-model 、v-on、v-text

1.能够显示商品名，价格，以及当前商品在购物车的数量
2. 点击 加+ 减-  可以更改购物车中产品数量，如果数量小于0 则移除
3.根据产品价格和数量统计出总金额。

话不多说，直接上代码：（无css样式）

---

	
		
		
		
		
	
	
		

			
MyShoopingCqrt
			

				
品名Name
价格Price
重量Quality
				

					
{{ item.name }}
					
（{{ item.price }}￥/kg）
					

						-
						{{ item.quality }}
						+
					
				
				
				

					
Total
					
{{ total }}
				
				
				

					
添加商品Addgoods:
					
商品价格Addprice:
					
加入购物车Add to Cart