日志
Layui 2.6.8 模板
熱度 1 ||
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>測試 Layui 模板</title>
<link href="Mobile/lib/layui-v2.6.8/css/layui.css" rel="stylesheet" />
</head>
<body>
<div id="view">
<script id="demo" type="text/html">
<h3>{{ d.title }}</h3>
<ul>
{{# layui.each(d.list, function(index, item){ }}
<li>
<span>{{ index + 1 }}</span>
<span>{{ item.modname }}</span>
<span>{{ item.alias }}：</span>
<span>{{ item.site || '' }}</span>
</li>
{{# }); }}
{{# if(d.list.length === 0){ }}
無數(shù)據(jù)
{{# } }}
</ul>
</script>
<script src="Mobile/lib/layui-v2.6.8/layui.js"></script>
<script type="text/javascript">
// layui 閉包
layui.use(function () {
var laytpl = layui.laytpl; // 模板對象
var $ = layui.$; // jQuery對象
//要渲染的json數(shù)據(jù)
var data = {
"title": "Layui常用模塊",
"list": [
{ "modname": "彈層", "alias": "layer", "site": "layer.layui.com" },
{ "modname": "模板", "alias": "laytpl" },
{ "modname": "表格", "alias": "table" },
{ "modname": "表單", "alias": "form" }
]
};
var demoTpl = demo.innerHTML; // 獲取模板
var view = $('#view'); // 獲取要渲染DOM對象
//laytpl.render: 渲染語法格式
//1. 使用回調(diào)函數(shù)：laytpl(模板字符串).render(json數(shù)據(jù), function (渲染生成的字符串) { });
//2. 直接生成字符串：var 渲染生成的字符串 = laytpl(模板字符串).render(json數(shù)據(jù));
//laytpl 模板語法
// d: json數(shù)據(jù)
// {{ }} 默認的模板分割符，用來插入js表達式，如果與其它模板沖突，可重新定義 laytpl.config({open: '<%', close: '%>'})
// {{ # ... }} 插入js語句塊
//示例：
//<h3>{{ d.title }}</h3>
//<ul>
// {{# layui.each(d.list, function(index, item){ }}
// <li>
// <span>{{ index + 1 }}</span>
// <span>{{ item.modname }}</span>
// <span>{{ item.alias }}：</span>
// <span>{{ item.site || '' }}</span>
// </li>
// {{# }); }}
// {{# if(d.list.length === 0){ }}
// 無數(shù)據(jù)
// {{# } }}
//</ul>
//渲染結(jié)果
//<h3>Layui常用模塊</h3>
//<ul>
// <li>
// <span>1</span>
// <span>彈層</span>
// <span>layer：</span>
// <span>layer.layui.com</span>
// </li>
// <li>
// <span>2</span>
// <span>模板</span>
// <span>laytpl：</span>
// <span></span>
// </li>
// <li>
// <span>3</span>
// <span>表格</span>
// <span>table：</span>
// <span></span>
// </li>
// <li>
// <span>4</span>
// <span>表單</span>
// <span>form：</span>
// <span></span>
// </li>
//</ul>
// 渲染模板 => html，利用回調(diào)函數(shù)添加到 DOM 對象 view 中
laytpl(demoTpl).render(data, function (html) {
view.append(html);
view.append('<hr/>'); // 添加一條分割線
});
});
</script>
</body>
</html>
