<!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> |