1,建立试图
<div id="normal-exchange" >
<div id="exchange-infor" ></div>
</div>
2、建立模板
<script id="demo" type="text/html">
{{# if(d.exrate==5) { }}
5
{{# }else if(d.exrate==1) { }}
1
{{# } }}
</script>
3、创建json文件,模拟数据接口
{
"code": 0,
"msg": "",
"data": [{
"url": "../../img/ad2.jpg",
"roomname": "七天酒店",
"exrate": "3",
"goodscount": 5
}]
}
4、数据渲染
<script>
layui.use(['laytpl','jquery'],function(){
var laytpl = layui.laytpl,
$ = layui.$;
//渲染模板
$(function(){
$.ajax({
url: './index.json',
type: 'get',
dataType: 'json',
success: function (res) {
//请求成功
if(res.code==0){
var htmlList = '';
var data = res.data;
var getTpl = demo.innerHTML;
//将返回的数据以模板的形式显示出来
$.each(data, function(index,elem) {//i为索引,el为当前对象
htmlList += laytpl(getTpl).render(elem);
});
$('#exchange-infor').empty().append(htmlList);
}
}
});
});
});
</script>