专栏首页sktjLayui 模板laytpl

Layui 模板laytpl

//第一步:编写模版。你可以使用一个script标签存放模板,如: <script id="demo" type="text/html"> <h3>{{ d.title }}</h3> <ul> {{# layui.each(d.list, function(index, item){ }} <li> <span>{{ item.modname }}</span> <span>{{ item.alias }}:</span> <span>{{ item.site || '' }}</span> </li> {{# }); }} {{# if(d.list.length === 0){ }} 无数据 {{# } }} </ul> </script>

//第二步:建立视图。用于呈现渲染结果。 <div id="view"></div>

//第三步:渲染模版 var data = { //数据 "title":"Layui常用模块" ,"list":[{"modname":"弹层","alias":"layer","site":"layer.layui.com"},{"modname":"表单","alias":"form"}] } var getTpl = demo.innerHTML ,view = document.getElementById('view'); laytpl(getTpl).render(data, function(html){ view.innerHTML = html; });

模板语法

{{ d.field }} 不转义 {{= d.field }} 转义 {{# JavaScript表达式 }} {{# var fn = function(){ return '2017-08-18'; }; }} {{# if(true){ }} 开始日期:{{ fn() }} {{# } else { }} 已截止 {{# } }}

{{! template !}} 对一段指定的模板区域进行过滤,即不解析该区域的模板。注:layui 2.1.6 新增 <div> {{! 这里面的模板不会被解析 !}}</div>

重新定义模板分隔符

laytpl.config({ open: '<%', close: '%>' });

//分割符将必须采用上述定义的 laytpl([ '<%# var type = "公"; %>' //JS 表达式 ,'<% d.name %>是一位<% type %>猿。' ].join('')).render({ name: '贤心' }, function(string){ console.log(string); //贤心是一位公猿 });

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • flash werkzeug计算和验证密码(flask 68)

    from werkzeug.security import generate_password_hash, check_password_hash

    用户5760343
  • IOS 使用AVPlayer播放MP4

    用户5760343
  • python flask web开发实战 bootstrap

    from flask.ext.bootstrap import Bootstrap

    用户5760343
  • BAT 前端开发面经 —— 吐血总结

    最近暑期实习招聘已经开始,个人目前参加了阿里的内推及腾讯和百度的实习生招聘,在此总结一下 一是备忘、总结提升,二是希望给大家一些参考 其他面试及基础相关可以...

    超然
  • JavaScript代码压缩细节

    对于Javascript来说,提高网络下载的性能最直接的方法就是把JS文件体积减小。

    慕白
  • 用canvas制作彩虹球喷枪(js面向对象小案例)

    剽悍一小兔
  • js ---- 实现千位分隔符

    var num = 1234567; var string = num.toString(); var arr = string.split('').rev...

    小蔚
  • 深入理解 Javascript 之 JS的解析与执行过程

    https://segmentfault.com/a/1190000015940119

    前端博客 : alili.tech
  • 八、通过断点调试观察JS执行过程

    利用chrome开发者工具中的断点调试,我们能够一步步观察JavaScript的执行过程,直观感知函数调用栈、作用域链、变量对象、闭包、this等关键信息的变化...

    用户6901603
  • js笔记

    1.克隆对象 克隆数组: var country=['中国','美国']; var copyCountry=country.slice(0); 克隆对象: va...

    用户1055830

扫码关注云+社区

领取腾讯云代金券