art-template模板引擎

lxl211

已于 2023-03-23 16:11:20 修改

阅读量362

点赞数

分类专栏： Ajax 文章标签： ajax art-template

于 2023-03-22 23:18:10 首次发布

本文链接：https://blog.csdn.net/lxllxl211/article/details/129721336

版权

Ajax 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

art-template 提供了{ { } }这种语法格式，在{ { } }内可以进行变量输出，或循环数组等操作，这种{ { } }语法在 art-template中被称为标准语法。

1、模板引擎-常用语法

1.1、标准语法：输出

在这里插入图片描述
在{ { } }语法中，可以进行变量的输出、对象属性的输出、三元表达式输出、逻辑或输出、加减乘除等表达式输出。

1.2、标准语法：原文输出

在这里插入图片描述
如果要输出的 value 值中，包含了 HTML 标签结构，则需要使用原文输出语法，才能保证 HTML 标签被正常渲染。

const data = {
title: '<h3>用户信息</h3>',
}
<script type="text/html" id="abc">
<div id="title">{{title}}</div>
    <div id="title">{{@title}}</div>
</script>

在这里插入图片描述

1.3、标准语法：条件输出

如果要实现条件输出，则可以在{ { } }中使用 if … else if … /if 的方式，进行按需输出
在这里插入图片描述

const data = {
    flag: 1,
}
<div>
    {{if flag===0}}
    flag等于0
    {{else if flag===1}}
    flag等于1
    {{/if}}
</div>

在这里插入图片描述

1.4、标准语法：循环输出

如果要实现循环输出，则可以在{ { } }内，通过 each 语法循数组，当前循环的索引使用 $index 进行访问当前的循环项使用 $value 进行访问。
在这里插入图片描述

bobby: ['吃饭', '睡觉', '打豆豆'],
<div>
    {{each bobby}}
    <li>索引是{{$index}},循环项是：{{$value}}</li>
    {{/each}}
</div>

在这里插入图片描述

1.5、标准语法：过滤器

在这里插入图片描述

过滤器语法类似管道操作符，它的上一个输出作为下一个输入。

定义过滤器的基本语法如下:
在这里插入图片描述

<h4>{{regTime | dateFormat}}</h4>
//定义处理时间的过滤器
template.defaults.imports.dateFormat = function (date) {
   const y = date.getFullYear();
   const m = date.getMonth() + 1;
   const d = date.getDate();
   return y + '-' + m + '-' + d;
};

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js-min-jqury.js"></script>
    <!-- 1导入模板引擎----------------------------------------------- -->
    <!-- 在window全局，多了一个函数，叫做template('模板的id'，需要渲染的数据) -->
    <script src="template-web.js"></script>
</head>

<body>
    <!-- <div id="title"></div>
    <div>姓名：<span id="name"></span></div>
    <div>年龄：<span id="age"></span></div>
    <div>会员：<span id="isVIP"></span></div>
    <div>注册时间：<span id="time"></span></div>
    爱好：
    <ul>
        <li>吃饭</li>
        <li>睡觉</li>
        <li>打豆豆</li>
    </ul> -->
    <!-- 3.定义模板-------------------------------------------- -->
    <!-- 模板的HTML结构，必须定义在script中 -->
    <script type="text/html" id="abc">
        <div id="title">{{title}}</div>
        <div id="title">{{@title}}</div>
        <div>姓名：<span id="name">{{name}}</span></div>
        <div>年龄：<span id="age">{{age}}</span></div>
        <div>会员：<span id="isVIP">{{isVIP}}</span></div>
        <div>注册时间：<span id="time">{{time}}</span></div>
        爱好：
        <ul>
            <li>{{bobby[0]}}</li>
            <li>{{bobby[1]}}</li>
            <li>打豆豆</li>
        </ul>
<div>
    {{if flag===0}}
    flag等于0
    {{else if flag===1}}
    flag等于1
    {{/if}}
</div>
<div>
    {{each bobby}}
    <li>索引是{{$index}},循环项是：{{$value}}</li>
    {{/each}}
</div>

<h3>时间是{{regTime}}</h3>


<h4>{{regTime | dateFormat}}</h4>
    </script>

    <script>
        //定义处理时间的过滤器
        template.defaults.imports.dateFormat = function (date) {
            const y = date.getFullYear();
            const m = date.getMonth() + 1;
            const d = date.getDate();
            return y + '-' + m + '-' + d;
        };
        // 2.定义需要渲染的数据-------------------------------
        const data = {
            title: '<h3>用户信息</h3>',
            name: 'llx',
            age: 4523,
            isVIP: true,
            regTime: new Date(),
            bobby: ['吃饭', '睡觉', '打豆豆'],
            flag: 1,
            regTime: new Date(),
        }
        // 4.调用templace函数------------------------------
        const t1 = template('abc', data);
        console.log(t1);
        document.querySelector('body').innerHTML = t1;


    </script>
</body>

</html>

在这里插入图片描述

lxl211

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
art-template模板引擎

则可以在{ { } }中使用 if …/if 的方式，进行按需输出。等操作，这种{ { } }语法在 art-template中被称为标准语法。如果要输出的 value 值中，包含了 HTML 标签结构，则需要使用。语法，才能保证 HTML 标签被正常渲染。这种语法格式，在{ { } }内可以进行。art-template 提供了。在{ { } }语法中，可以进行。
复制链接

扫一扫