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}} </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.结果图