参考地址：

Layui官方文档地址；
laytpl在线调试地址；

示例：

// 第一步：创建视图标签，用于渲染模板内容
<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);// 打印内容：小明是一个好人
});

Layui模板-laytpl相关推荐

js layui 模板属性添加_layui.laytpl--模板引擎文档
与一般的字符拼接不同的是,laytpl 的模板可与数据分离,集中把逻辑处理放在 View 层,提升代码可维护性,尤其是针对大量模板渲染的情况. layui.use('laytpl', function ...
使用layui模板填充页面数据
layui,是一款采用自身模块规范编写的前端 UI 框架,遵循原生 HTML/CSS/JS 的书写与组织形式,门槛极低,拿来即用.其外在极简,却又不失饱满的内在,体积轻盈,组件丰盈,从核心代码到 AP ...
LayUI模板引擎渲染数据
前端模板引擎介绍接上节Spring boot项目开发实战--(LayUI实现前后端数据交换与定义方法渲染数据) 模板引擎能简化开发,极大提高效率,小编之前使用过JSP和Thymeleaf,以及pyt ...
html 开发中遇到的问题，ajax异步传输，layui模板引擎并重新渲染
1.实际中自己遇到的,比较杂乱绑定点击事件绑定enter事件 html A页面跳转到B页面,并传参.取值 layui模板引擎,渲染样式 Ajax 异步传输数据,动态更新内容绑定点击事件 < ...
layui的laytpl使用，以table应用为例
laytpl是javascript模板引擎,在字符解析上有着教出色的表现,欠缺之处在于异常调试上. 应用: table中某个字段值为obj类型的,需要遍历每个值进行处理后显示时 <script ...
如何基于layui的laytpl实现数据绑定
1.前言一开始用layui做了几个管理系统,所以用起来觉得确实很容易上手,管理后台最常用的就是form和table以及弹窗类.layui提供的form table layer已经是很简洁好用了,抛开 ...
怎样存储layui模板引擎后台返回的数据，在需要的时候获取
在项目中遇到一个情况,需要动态获取后台的返回数据,并在前台渲染出来,并且能够根据所点击的不同标签,随时获取对应数据.在网上看到两种方法,一种是写一个动态创建div模板的函数,并将返回值作为参数在其中展 ...
layui模板引擎laytpl判断为null或为空
<script type="text/html" id="stu_nameTpl">{{# if(d.stu_name==null || d.stu ...
Enjoy模板里使用layui模板引擎laytpl
注:https://jfinal.com/share/1023
layui模板引擎做动态增加和减少表单
效果显示目录结构代码 <!DOCTYPE html> <html lang="en"><head><meta charset=&quo ...

Layui模板-laytpl

Layui模板-laytpl

参考地址：

示例：

模版语法

分隔符

Layui模板-laytpl相关推荐

最新文章

热门文章