art-template前端模板引擎

人间小美味695

已于 2022-11-19 21:49:06 修改

阅读量1.2k

点赞数 2

分类专栏：前端 # JavaScript # 插件类文章标签： html 前端模板引擎 template

于 2021-05-08 09:36:44 首次发布

本文链接：https://blog.csdn.net/cainiaoyihao_/article/details/116272695

版权

JavaScript 同时被 3 个专栏收录

33 篇文章 7 订阅

订阅专栏

前端

25 篇文章 8 订阅

订阅专栏

插件类

15 篇文章 1 订阅

订阅专栏

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