Vue实例结合Bootstrap-商城购物车效果

目前在学习Vue2.x 跟教程一起写的购物车实例，课程只讲获取数据和功能的实现，所以自己搭了一个简单界面，中间也遇到过问题，获取数据显示XML解析失败，后来发现我应该把项目放到服务器上运行，报错消失了。

下面是代码，供大家参考

<%@ page language="java" import="java.util.*" pageEncoding="GB18030"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>




	
	
	
	
	
	
	
	




	

		

			

				
 
					
购物车
					
个人中心
				
			
			

				

					

						
						
							
						
					
					

						
						

						

							
								{{shop.shopStyle[0]}}
								{{shop.shopStyle[1]}}
								{{shop.shopStyle[2]}}
							
						
						

							{{shop.shopPrice | moneyFormat(shop.shopPrice)}}
							
{{shop.shopNumber*shop.shopPrice | moneyFormat(shop.shopNumber*shop.shopPrice)}}
							

								
								
								
								
							
						
						

							
						
					
				
				

					全选
					

						合计：{{totalPrice | moneyFormat(totalPrice)}}
					
					

						去结算
					
				
			
		
	
	
	

		

			

				

					×
					
删除商品
				
	      		

			       	您确定要删除商品？
				
				

					取消
					确定
				
			
		
	

上面是.jsp文件，直接复制可以用，但是得有Bootstrap、Vue.js、vue-resource.js、jQuery.js，注意引入顺序~~~

{
	"allShops": {
		"totalMoney": 0,
		"shopList": [
			{
				"shopId": "1001",
				"shopName": "女孩旗袍夏款",
				"shopPrice": 58,
				"shopNumber": 1,
				"shopImage": "img/03.jpg",
				"shopDetail": "中国风盘口短袖女宝1-8岁复古民族风儿童汉服连衣裙",
				"shopStyle": ["绿木兰花","黄色绽放","水墨荷花"]
			},
			{
				"shopId": "1002",
				"shopName": "斯拉夫酸奶威化",
				"shopPrice": 39.8,
				"shopNumber": 2,
				"shopImage": "img/01.jpg",
				"shopDetail": "斯拉夫酸奶威化1000g俄罗斯进口巧克力夹心饼干进口零食",
				"shopStyle": ["绿木兰花","黄色绽放","水墨荷花"]
			},
			{
				"shopId": "1003",
				"shopName": "美式实木台灯北欧",
				"shopPrice": 185.0,
				"shopNumber": 1,
				"shopImage": "img/02.jpg",
				"shopDetail": "美式实木台灯北欧卧室床头灯温馨客厅装饰浪漫结婚灯现代简约创意",
				"shopStyle": ["A款 送5瓦led","B款 送5瓦led","C款 送5瓦led"]
			}
		]
	}
}

上面是JSON数据，我用的本地数据

还有图片自己准备一下哈，哦对了，我用了字体图标

https://icomoon.io/app/#/select/font

这是图标下载地址

右下角点击下载哈~

欢迎大家评论，一起交流学习，一起进步