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

最新推荐文章于 2023-08-28 08:00:28 发布

Web-once

最新推荐文章于 2023-08-28 08:00:28 发布

阅读量1.4k

点赞数 1

本文链接：https://blog.csdn.net/qq_42381297/article/details/82501885

版权

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

下面是代码，供大家参考

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

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Vue界面使用本地数据</title>
	<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css">
	<script type="text/javascript" src="jquery.js"></script>
	<script type="text/javascript" src="bootstrap/js/bootstrap.js"></script>
	<script type="text/javascript" src="Vue.js"></script>
	<script type="text/javascript" src="vue-resource.js"></script>
	<style>
		body{
			background: #e8e8e8;
		}
		@font-face{
			font-family: cart;
			src: url('fonts/icomoon.eot') format('embedded-opentype'),
		    url('fonts/icomoon.svg') format('svg'),
		    url('fonts/icomoon.ttf') format('truetype'),
		    url('fonts/icomoon.woff') format('woff');
		}
		#app{
			margin-top: 100px;
		}
		#app .container{
			background: #fff;
			padding: 20px 15px;
		}
		.cart{
			padding-left: 100px;
			border-bottom: 1px solid #eee;
			padding-bottom: 10px;
			position: relative;
		}
		.cart .check{
			width: 14px;
			height: 14px;
			position: absolute;
			top: 50%;
			margin-top: -7px;
			left: 0;
		}
		.cart .media-body{
			padding: 10px 200px 0 20px;
		}
		.cart .media-heading{
			color: #000;
			font-size: 20px;
		}
		.cart .media-body select{
			border: 1px solid #eee;
			background: #eee;
			/*隐藏select的下拉图标*/
			-moz-appearance: none;
			padding-right: 20px;
			line-height: 20px;
			font-size: 12px;
		}
		.cart .media-body .cart_select{
			position: relative;
			display: inline-block;
		}
		.cart .media-body .cart_select::after{
			content: "";
			position: absolute;
			top: 50%;
			margin-top: -3px;
			right: 3px;
			border-left: 6px solid transparent;
			border-top: 6px solid #666;
			border-right: 6px solid transparent;
		}
		.cart .media-body .data{
			m

最低0.47元/天解锁文章

Web-once

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Vue实例结合Bootstrap-商城购物车效果

目前在学习Vue2.x 跟教程一起写的购物车实例，课程只讲获取数据和功能的实现，所以自己搭了一个简单界面，中间也遇到过问题，获取数据显示XML解析失败，后来发现我应该把项目放到服务器上运行，报错消失了。下面是代码，供大家参考&lt;%@ page language="java" import="java.util.*" pageEncoding="GB18030"%&gt;&lt;%...
复制链接

扫一扫