layui模板引擎的使用1

1.html文件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="../../layui/css/layui.css" />
		<link rel="stylesheet" href="../../css/test.css" />
		
	</head>
	<body>
		<h1>模板引擎</h1>
		<div id="normal-exchange" class="normal-exchange" style="display: none;">
			<div class="normal-exchange-title">
				<i class="layui-icon layui-icon-face-smile-fine" style="font-size: 32px;font-weight: bold;"></i>
				普通兑换
			</div>
			<!--建立视图-->
			<div id="exchange-infor" class="exchange-infor"></div>
		</div>
		<h1>底部</h1>
		<!--建立模板-->
		<script id="demo" type="text/html">
			<a class="exchange-infor-item" href="">
				<div class="hotelinfor">
					<div class="imginfor">
						<img src="{{d.url}}"/>
					</div>
					<div class="textinfor">
						<p class="hotelname">{{d.roomname}}</p>
						<p class="exchangerate">兑换比例
							<span>1:{{d.exrate}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
							{{# if(d.goodscount>=d.exrate) { }}					
								<span style="color:#5FB878 ;">持券充足</span>
							{{# }else if(d.goodscount<d.exrate) { }}
								<span style="color:#FF5722 ;">持券不足</span>
							{{# } }}
						</p>
					</div>
				</div>
			</a>	
		</script>
		
		<script type="text/javascript" src="../../layui/layui.js" ></script>
		<script>
			layui.use(['laytpl','jquery'],function(){
				var laytpl = layui.laytpl,
				$ = layui.$;
				
				//渲染模板
				$(function(){
					$.ajax({
						url: '../../json/data1.json',
						type: 'get',
				        dataType: 'json',
				        success: function (res) {
				        	console.log(res);
				        	//请求成功
				        	if(res.code==0){
				        		$('#normal-exchange')[0].style.display = "";
				        		var htmlList = '';
								var data = res.data;
								
								var getTpl = demo.innerHTML;
								
								//将返回的数据以模板的形式显示出来
								$.each(data, function(index,elem) {//i为索引,el为当前对象
									console.log(elem);
									htmlList += laytpl(getTpl).render(elem);
								});
			
								$('#exchange-infor').empty().append(htmlList);
				        	}
				        }
					});
				});
			});
		</script>
	</body>
</html>

2.css文件

.normal-exchange-title{
	width: 1100px;
	height: 50px;
	background-color: #1E9FFF;
	font-size: xx-large;
    color: white;
  	padding-top: 9px;
}

.exchange-infor{
	width: 1100px;
	margin-bottom: 10px;
	/*border: 1px solid black;*/
}

.hotelinfor:hover{
	border: 1px solid #01AAED;
}

.hotelinfor{
	width: 330px;
	height: 350px;
	margin: 10px;
	display: inline-block;
	/*防止display: inline-block;造成的错位*/
	vertical-align: top;
	border: 1px solid #f1ebe4;
}

.imginfor img{
	width: 330px;
	height: 250px;
}

.textinfor{
	padding: 10px;
}

.textinfor p{
	margin: 10px;
	font-size: 20px;
}

3.json文件

{
	"code": 0,
	"msg": "",
	"data": [{
		"url": "../../img/ad2.jpg",
		"roomname": "七天酒店",
		"exrate": "5",
		"goodscount": 5
	}, {
		"url": "../../img/ad2.jpg",
		"roomname": "九龙大酒店",
		"exrate": "7",
		"goodscount": 5
	}, {
		"url": "../../img/ad2.jpg",
		"roomname": "锦江之星",
		"exrate": "5",
		"goodscount": 5
	}, {
		"url": "../../img/ad2.jpg",
		"roomname": "城市便捷酒店",
		"exrate": "9",
		"goodscount": 5
	}]
}

4.结果图

layui模板引擎的使用1

猜你喜欢