目录
- 内容介绍
- 一、使用方法
- 二、主要API
- 1、原文输出
- 2、逻辑判断
- 3、循环语句
- 三、代码
- 四、页面显示
- 五、其他
- 1、pre标签
- 2、code标签
内容介绍
今天我们要了解的是一款高性能的 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渲染
更多演示案例，查看 案例演示
欢迎评论留言!
