art-template

输出

标准语法

{{value}}

{{data.key}}

{{data['key']}}

{{a ? b : c}}

{{a || b}}

{{a + b}}

原始语法

<%= value %>

<%= data.key %>

<%= data['key'] %>

<%= a ? b : c %>

<%= a || b %>

<%= a + b %>

基本案例

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport"

          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>测试art-template</title>

</head>

<body>

<div id="user-cont"></div>

<script id="user-tpl" type="text/html">

    <h2>{{ name }}</h2>

    {{$data}}

</script>

</body>

<script src="./lib/template-web.js"></script>

<script>

    let data = {

        name: '姓名',

    };

    let html = template('user-tpl', data);

    document.getElementById('user-cont').innerHTML = html;

</script>

</html>

原文输出

原文输出语句不会对 HTML 内容进行转义处理，可能存在安全风险，请谨慎使用。

标准语法

{{@ value }}

原始语法

<%- value %>

基本案例

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport"

          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>测试art-template</title>

</head>

<body>

<div id="user-cont"></div>

<script id="user-tpl" type="text/html">

    {{if user.is_show}}

    <h2>{{@ user.name }}</h2>

    {{each user.child}}

        <p>孩子{{$index + 1}}:{{$value}}</p>

    {{/each}}

    {{/if}}

    {{$data}}

</script>

</body>

<script src="./lib/template-web.js"></script>

<script>

    let data = {

        user: {

            is_show: true,

            name: '<span style="color:red;">张三</span>',

            child: ['大毛','二毛','三毛']

        }

    };

    let html = template('user-tpl', data);

    document.getElementById('user-cont').innerHTML = html;

</script>

</html>

条件判断

标准语法

{{if value}} ... {{/if}}

{{if v1}} ... {{else if v2}} ... {{/if}}

原始语法

<% if (value) { %> ... <% } %>

<% if (v1) { %> ... <% } else if (v2) { %> ... <% } %>

基本案例

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport"

          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>测试art-template</title>

</head>

<body>

<div id="user-cont"></div>

<script id="user-tpl" type="text/html">

    {{if user.is_show}}

    <h2>{{ user.name }}</h2>

    {{/if}}

    {{$data}}

</script>

</body>

<script src="./lib/template-web.js"></script>

<script>

    let data = {

        user: {

            name: '姓名',

            is_show: false,

        }

    };

    let html = template('user-tpl', data);

    document.getElementById('user-cont').innerHTML = html;

</script>

</html>

循环

标准语法

{{each target}}

    {{$index}} {{$value}}

{{/each}}

原始语法

<% for(var i = 0; i < target.length; i++){ %>

    <%= i %> <%= target[i] %>

<% } %>

基本案例

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport"

          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>测试art-template</title>

</head>

<body>

<div id="user-cont"></div>

<script id="user-tpl" type="text/html">

    {{if user.is_show}}

    <h2>{{ user.name }}</h2>

    {{each user.child}}

        <p>孩子{{$index + 1}}:{{$value}}</p>

    {{/each}}

    {{/if}}

    {{$data}}

</script>

</body>

<script src="./lib/template-web.js"></script>

<script>

    let data = {

        user: {

            is_show: true,

            name: '张三',

            child: ['大毛','二毛','三毛']

        }

    };

    let html = template('user-tpl', data);

    document.getElementById('user-cont').innerHTML = html;

</script>

</html>

赋值

标准语法

{{set temp = data.sub.content}}

原始语法

<% var temp = data.sub.content; %>

基本案例

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport"

          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>测试art-template</title>

</head>

<body>

<div id="user-cont"></div>

<script id="user-tpl" type="text/html">

    {{set date = '2019-03-18'}}

    <p>日期:{{date}}</p>

</script>

</body>

<script src="./lib/template-web.js"></script>

<script>

    let html = template('user-tpl',{});

    document.getElementById('user-cont').innerHTML = html;

</script>

</html>

art-template的更多相关文章

  1. art template前端模板引擎

    偶然看到后台有一段代码 采用的是art template的模板引擎 地址为 http://aui.github.io/artTemplate/ 这段代码很简洁 var html = template( ...

  2. art.template 循环里面分组。

    后台提供给我们一个数组,我们要用模版实现上面的格式输出怎么版呢? 下面就是解决方案: <h2>循环4个一组</h2> <script type="text/ht ...

  3. 利用art.template模仿VUE 一次渲染多个模版

    TypeScript代码 import template = require('art-template/lib/template-web'); interface TemplateBindConfi ...

  4. 利用art.template模仿VUE

    首先先看一下Typescript代码: import template = require('art-template/lib/template-web'); interface TemplateBi ...

  5. js 模板引擎 -Art Template

    一个例子涵盖所有: <!doctype html> <html> <head> <meta charset="UTF-8"> < ...

  6. 一分钟上手artTemplate

    一分钟上手artTemplate artTemplate是腾讯开源的前端模版引擎.之前做hue二次开发,只接触过用python写的mako模版引擎,所以之前对前端模版引擎了解不是很多. 这次因为pm叫 ...

  7. Express使用art-template模板引擎

    第一步:安装 npm install --save art-template npm install --save express-art-template 第二步:指定.html使用的解析引擎(官方 ...

  8. vscode开发中绝对让你惊艳的插件！！！(个人在用)

    识别模版引擎 1.Apache Velocity :识别Velocity(vm) 2.Art Template Helper:识别artTemplate 点击路径跳转 1.Laravel goto v ...

  9. ES6/ES2015的一些特性的简单使

    1.一些常用的ES6的特性: let, const, class, extends, super, arrow functions, template string, destructuring, d ...

  10. artTemplate子模板include

    art.Template:https://github.com/aui/art-template 下面来实现利用模版来实现递归调用生成tree <script type="text/h ...

随机推荐

  1. Object.defineProperty的理解

    一.Object.defineProperty:给一个对象定义一个新的属性或修改一个对象现有的属性,并且返回这个对象 1.语法:Object.defineProperty(参数1,参数2,参数3) 参 ...

  2. 像黑客一样使用Linux命令行（转载）

    阅读目录 前言 使用 tmux 复用控制台窗口 在命令行中快速移动光标 在命令行中快速删除文本 快速查看和搜索历史命令 快速引用和修饰历史命令 录制屏幕并转换为 gif 动画图片 总结 回到顶部 前言 ...

  3. JVM虚拟机详解

    1. 什么是JVM? JVM是Java Virtual Machine(Java虚拟机)的缩写,JVM是一种用于计算设备的规范,它是一个虚构出来的计算机,是通过在实际的计算机上仿真模拟各种计算机功能来 ...

  4. iOS项目之“返回”手势操作相关

    在程序中,总会设置“返回”按钮,但不可能在每一个控制器中都去设置一次“返回”按钮,那如何设置全局的“返回”按钮呢? 首先自定义一个导航控制器,在tabBarController中添加子控制器时,使用这 ...

  5. nodejs安装淘宝npm镜像【cnpm】

    安装完nodejs后[自带npm] 如果npm无法使用或需要FQ,可以先安装cnpm,然后使用cnpm install安装模块 安装全局cnpm npm install -g cnpm --regis ...

  6. scrapy instantiation

    start from scrapy.cmdline import execute execute(['scrapy', 'crawl', 'jokespider']) items.py import ...

  7. mycat下mysql jdbc connector使用高版本报PacketTooBigException异常

    如下所示: 5.1.30切换为mysql-connector 5.1.46/40,报错,可参考https://blog.csdn.net/n447194252/article/details/7530 ...

  8. 原生js封装的获取某一天是当年的第几周方法

    function getWeek(str){ //str格式为yyy-mm-dd //周日归到了本周 var d=new Date(str); var day=d.getDay(); var orig ...

  9. qt无法定位程序输入点 于动态链接库 qt5core.dll

    造成步骤:一开始是将现成的dll[Qt5.9.3]放在文件夹里,然后使用Qt5.7.1编译的exe放进去,产生标题错误 原因:dll库不匹配 解决:使用Qt5.7.1自带的cmd命令行,使用winde ...

  10. Junit Framework -TestRule,自动化测试中如何再次运行失败的测试用例

    有时由于服务器,浏览器等问题,会导致自动化测试用例运行失败,此处通过案例讲解如何使用Junit框架中的TestRule来实现重复运行失败的测试用例. 首先定义一个类并让它实现TestRule,代码如下 ...