<!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> |
原文地址：https://www.cnblogs.com/starksoft/p/10012814.html
时间： 2024-09-30 00:32:03