内容介绍
今天我们要了解的是一款高性能的 art-template 前端模板引擎 —— template-web.js
。
一、使用方法
- 定义容器元素
- 通过type="text/html"类型的script处理数据
- js处理:html内容=template(“处理数据script的ID”,data) ;容器innerHTML添加元素
二、主要API
1、原文输出
编码输出:{{variable}}
不编码输出:{{#variable}}
2、逻辑判断
{{if}}{{else if}}{{else}}{{/if}}
3、循环语句
{{each list as value index}}{{/each}}
三、代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>template-web.js前端模板引擎</title>
<!-- js文件可自行下载或私信联系作者 -->
<script src="./js/template-web.js"></script>
<style>
h6 {
color: red;
}
pre {
background-color: rgba(0, 0, 0, 0.1);
}
code {
background-color: rgba(0, 0, 0, 0.3);
}
</style>
</head>
<body>
<h6>使用方法:</h6>
<pre>
<code>
1、定义容器元素;
2、通过type="text/html"类型的script处理数据
3、js处理:html内容=template("处理数据script的ID",data) ;容器innerHTML添加元素
<br>
1、原文输出:
编码输出:{{variable}} 不编码输出:{{#variable}}
2、逻辑判断:
{{if}}{{else if}}{{else}}{{/if}}
3、循环语句:
{{each list as value index}}{{/each}}
</code>
</pre>
<div id="cons"></div>
<script id="consScript" type="text/html">
<h6>if else判断:</h6>
{{if bol===true}}
<span>bol is true</span> {{else if bol===false}}
<span>bol is false</span> {{else}}
<span>bol is not boolean</span> {{/if}}
<h6>遍历表达式:</h6>
<ul>
{{each list as value index}}
<li>{{index+1}}、list text is {{value}}</li>
{{/each}}
</ul>
</script>
<script>
let obj = {
name: 'tom',
age: 12,
gender: 'man',
time: 1611647071,
filename: 'template-web.html',
filepath: 'C:\qingshan\practice\bei\template-web.html',
hobby: 'football',
list: ["name", "age", "sex", "hobby"],
bol: true,
span: '<span>span</span>'
};
let html = template("consScript", obj);
document.getElementById("cons").innerHTML = html;
</script>
</body>
</html>
四、页面显示
控制台提示:
template版本升级,循环语句由 {{each object as value index}}
改为 {{each object value index}}
。
五、其他
1、pre标签
可定义预格式化的文本。
被包围在 <pre>
标签元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。
2、code标签
<code>
标签用于表示计算机源代码或者其他机器可以阅读的文本内容。
<code>
和 <pre>
标签结合使用会有意想不到的效果。
标签:前端模板引擎,template,HTML渲染
更多演示案例,查看 案例演示
欢迎评论留言!