<!DOCTYPE html> <html class="ui-page-login"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <title>laytpl模板引擎实例</title> <!--CSS--> <script src="js/laytpl/laytpl.js"></script> <script> //第三步：渲染模版 //数据 var data = { title: '前端卷子', intro: '一群码js的骚年，幻想改变世界，却被世界改变。', list: [{ name: '贤心', city: '杭州' }, { name: '谢亮', city: '北京' }, { name: '浅浅', city: '杭州' }] }; window.onload = function () { var gettpl = document.getElementById('testTpl').innerHTML; laytpl(gettpl).render(data, function (html) { //得到的模板渲染到html document.getElementById('testDiv').innerHTML = html; }); } </script> </head> <body> <!-- 第一步：编写模版。你可以使用一个script标签存放模板，如： --> <script id="testTpl" type="text/html"> <h1>{{ d.title }}</h1> <p>{{d.intro}}</p> <ul> {{# for(var i = 0; i < d.list.length; i++){ }} <li> <span>姓名：{{ d.list[i].name }}</span> <span>城市：{{ d.list[i].city }}</span> </li> {{# } }} </ul> </script> <!-- 第二步：建立视图。用于呈现渲染结果。 --> <div id="testDiv"></div> </body> </html>
模板语法
| 语法 | 说明 | 示例 |
|---|---|---|
| {{ d.field }} | 输出一个普通字段，不转义html | <div>{{ d.content }}</div> |
| {{= d.field }} | 输出一个普通字段，并转义html | <h2>{{= d.title }}</h2> |
| {{# JavaScript表达式 }} | JS 语句。一般用于逻辑处理。用分隔符加 # 号开头。 注意：如果你是想输出一个函数，正确的写法是：{{ fn() }}，而不是：{{# fn() }} |
{{#var fn = function(){return '2017-08-18';}; }} {{# if(true){ }}开始日期：{{ fn() }} {{# } else { }}已截止{{# } }} |
| {{! template !}} | 对一段指定的模板区域进行过滤，即不解析该区域的模板。注：layui 2.1.6 新增 | <div> {{! 这里面的模板不会被解析 !}}</div> |