art-template模板引擎

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

1、模板引擎-常用语法

1.1、标准语法:输出

art-template模板引擎_第1张图片
在{ { } }语法中,可以进行变量的输出、对象属性的输出、三元表达式输出、逻辑或输出、加减乘除等表达式输出。

1.2、标准语法:原文输出

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

const data = {
title: '

用户信息

'
, } <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 进行访问。
art-template模板引擎_第2张图片

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

在这里插入图片描述

1.5、标准语法:过滤器

art-template模板引擎_第3张图片
在这里插入图片描述
过滤器语法类似管道操作符,它的上一个输出作为下一个输入。

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

<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: '

用户信息

'
, 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>

art-template模板引擎_第4张图片

你可能感兴趣的:(Ajax,ajax,art-template)