参考地址:
示例:
// 第一步:创建视图标签,用于渲染模板内容
<ul class="demo-ul" id="ulBox"></ul>
// 第二步:编写模版,模板内容存放在script标签内
<script id="ulBoxJs" type="text/html">
{{# layui.each(d, function (index, item) { }}
<li class="demo-li">
<div class="name">
<a href="{{item.url?item.url:'javascript:void(0);'}}">{{item.name}}</a>
</div>
{{# if (item.children) { }}
<ul class="children">
{{# layui.each(item.children, function(ind, it){ }}
<li>
<a href="{{it.url?it.url:'javascript:void(0);'}}">{{it.name}}</a>
</li>
{{# }); }}
</ul>
{{# } }}
</li>
{{# }); }}
</script>
// 第三步:渲染模版
const arr = []; // 数据
layui.use('laytpl', function () {
const laytpl = layui.laytpl;
const getTpl = ulBoxJs.innerHTML;
const view = document.getElementById('ulBox');
laytpl(getTpl).render(arr, function (html) {
view.innerHTML = html;
});
})
模版语法
语法 | 说明 | 示例 |
---|---|---|
{{ d.field }} | 输出一个普通字段,不转义html | <div>{{ d.content }}</div> |
{{= d.field }} | 输出一个普通字段,并转义html | <h2>{{= d.title }}</h2> |
{{# JavaScript表达式 }} | JS 语句。一般用于逻辑处理。用分隔符加 # 号开头。 注意:如果你是想输出一个函数,正确的写法是:{{ fn() }},而不是:{{# fn() }} | {{# if(true){ }} 表达式为真 {{# } }} |
{{! template !}} | 对一段指定的模板区域进行过滤,即不解析该区域的模板。注:layui 2.1.6 新增 | <div> {{! 这里面的模板不会被解析 !}}</div> |
分隔符
如果模版默认的 {{ }} 分隔符与你的其它模板(一般是服务端模板)存在冲突,可以重新定义分隔符:
laytpl.config({
open: '<%',
close: '%>'
});
// 分割符将必须采用上述定义的
laytpl([
'<%# let type = "好"; %>' // JS 表达式,
'<% d.name %>是一个<% type %>人。'
].join('')).render({
name: '小明'
}, function(string){
console.log(string);
// 打印内容:小明是一个好人
});