layui.laytpl( )函数
裴鸿熙
这是一个轻量级的模板渲染函数。
设置模板
模板语法：{{ d.name }} 输出d对象中的name属性值
{{# d.name }} 没有输出，这里一般用来填写js脚本
模板内容用一个<script></script>包围起来，取内容通过给<script>设置id以及innerHTML属性获取。如：
<script id="demo">
{{ d.title }}
</script>一般用d或者data来指代模板传入的数据包。
渲染模板
如何渲染模板内容呢？
1、设置传入数据源。
var data = {
title: '前端web',
};2、设置效果展示的容器
<div id="view"></div>3、通过laytpl函数渲染。
//读取模板内容
var gettpl = document.getElementById('demo').innerHTML;
//传入模板内容以及数据源，得到渲染后的内容html文本
layui.laytpl(gettpl).render(data, function(html){
//展示内容
document.getElementById('view').innerHTML = html;
});全部代码：（layui的资源文件需要自己导入）
Layui - 经典开源模块化前端 UI 框架（正版，将于2020/10/13下线）
Layui - 经典开源模块化前端 UI 框架（众多纪念版中的一个）
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 引入 layui.css -->
<link rel="stylesheet" href="layui/css/layui.css">
<!-- 引入 layui.js -->
<script src="layui/layui.js"></script>
</head>
<body>
<div id="view"></div>
<script id="demo">
{{ d.title }}
<br>
{{# for(var i = 0, len = d.list.length; i < len; i++){ }}
姓名：{{ d.list[i].name }}
<input><br>
城市：{{ d.list[i].city }}
<input><br>
{{# } }}
</script>
<script type="text/javascript">
var data = {
title: '前端web',
list: [{name: '岁月', city: '岁月'}, {name: '五河', city: '五河'}, {name: '不该', city: '不该'}, {name: '不尬', city: '不尬'}]
};
var gettpl = document.getElementById('demo').innerHTML;
layui.laytpl(gettpl).render(data, function(html){
document.getElementById('view').innerHTML = html;
});
</script>
</body>
</html>
类似资料：