art-template前端模板引擎

<!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渲染

更多演示案例，查看 案例演示

欢迎评论留言!

art-template前端模板引擎相关推荐

html jquery 模板引擎,jquery template.js前端模板引擎
作为现代应用,ajax的大量使用,使得前端工程师们日常的开发少不了拼装模板,渲染模板在刚有web的时候,前端与后端的交互,非常直白,浏览器端发出URL,后端返回一张拼好了的HTML串.浏览器对其进行 ...
java 前端模板_前端模板引擎入门
模板引擎模板引擎起到数据和视图分离的作用, 模板对应视图, 关注如何展示数据, 在模板外头准备的数据, 关注那些数据可以被展示. 后端模板引擎 freemarker 如下介绍, java后台的 ...
前端模板引擎 artTemplate的使用与进阶
前端模板引擎 artTemplate的使用与进阶查看全文 http://www.taodudu.cc/news/show-3760040.html 相关文章: springboot 整合 free ...
前端模板引擎——handlebars
目录一.代码二.页面显示一.代码 <!DOCTYPE html> <html lang="en"><head><meta chars ...
swig模板 PHP,nodejs前端模板引擎swig入门
相对于jade,我还是更喜欢swig前端模板引擎,jade虽然语法简练高效了不少,但是在我这最大的问题是他没有一个html该有的样子... 所以我还是决定使用swig,页面结构,样子都是熟悉的样子, ...
swig模板 PHP,如何使用nodejs前端模板引擎swig
这次给大家带来如何使用nodejs前端模板引擎swig,使用nodejs前端模板引擎swig的注意事项有哪些,下面就是实战案例,一起来看一下. 相对于jade,我还是更喜欢swig前端模板引擎,jad ...
template.js模板引擎下载和实例
定义: art-template 是一个简约.超快的模板引擎.它采用作用域预声明的技术来优化模板渲染速度,从而获得接近 JavaScript 极限的运行性能,并且同时支持 NodeJS 和浏览器下面 ...
jquery template.js前端模板引擎
作为现代应用,ajax的大量使用,使得前端工程师们日常的开发少不了拼装模板,渲染模板在刚有web的时候,前端与后端的交互,非常直白,浏览器端发出URL,后端返回一张拼好了的HTML串.浏览器对其进行 ...
前端模板引擎template之如何实现if-else、遍历
1.先来了解一下template模板 <!doctype html> <html lang="en"> <head><meta chars ...

art-template前端模板引擎

目录

内容介绍

一、使用方法

二、主要API

1、原文输出

2、逻辑判断

3、循环语句

三、代码

四、页面显示

五、其他

1、pre标签

2、code标签

art-template前端模板引擎相关推荐

最新文章

热门文章