日志
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){ }}
无数据
{{# } }}
</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数据
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. 使用回调函数：laytpl(模板字符串).render(json数据, function (渲染生成的字符串) { });
//2. 直接生成字符串：var 渲染生成的字符串 = laytpl(模板字符串).render(json数据);
//laytpl 模板语法
// d: json数据
// {{ }} 默认的模板分割符，用来插入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){ }}
// 无数据
// {{# } }}
//</ul>
//渲染结果
//<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，利用回调函数添加到 DOM 对象 view 中
laytpl(demoTpl).render(data, function (html) {
view.append(html);
view.append('<hr/>'); // 添加一条分割线
});
});
</script>
</body>
</html>
