當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

014-模板引擎

發布時間：2025/4/17 编程问答 41 豆豆

生活随笔收集整理的這篇文章主要介紹了 014-模板引擎小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

1. laytpl是JavScript模板引擎。與一般的字符拼接不同的是, laytpl的模板可與數據分離, 集中把邏輯處理放在View層, 提升代碼可維護性, 尤其是針對大量模板渲染的情況。

2. 模塊加載名稱: laytpl。

3. 模版語法

4. 分隔符

4.1. 如果模版默認的{{ }}分隔符與你的其它模板存在沖突, 你也可以重新定義分隔符:

laytpl.config({open: '<%',close: '%>' });// 分割符將必須采用上述定義的 laytpl(['<%# var type = "公"; %>' // JS表達式,'<% d.name %>是一位<% type %>猿。' ].join('')).render({name: '賢心' }, function(string){console.log(string); // 賢心是一位公猿 });

5. 例子

5.1. 代碼

<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>模板引擎 - layui</title><link rel="stylesheet" href="layui/css/layui.css"><script type="text/javascript" src="layui/layui.js"></script></head><body><script id="demo" type="text/html"><h1>{{ d.title }}</h1><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><script type="text/javascript">layui.use('laytpl', function(){var laytpl = layui.laytpl;// 第三步: 渲染模版var data = { // 數據"title": "Layui常用模塊","list": [{"modname": "彈層", "alias": "layer", "site": "http://www.layer.layui.com"}, {"modname": "日期與時間", "alias": "form", "site": "http://www.layui.com/laydate"}]};var getTpl = demo.innerHTML,view = document.getElementById('view');laytpl(getTpl).render(data, function(html){view.innerHTML = html;});});</script></body> </html>

5.2. 效果圖

總結

以上是生活随笔為你收集整理的014-模板引擎的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。