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. mycat高可用集群搭建

    本文来源于:https://blog.csdn.net/u012758088/article/details/78741567 Mycat 本身是无状态的,可以用 HAProxy 或四层交换机等设备组 ...

  2. Golang框架Beego在Windows环境下小试牛刀

    Beego官网beego官网 : https://beego.me/github : https://github.com/beego Beego安装前提: ①Go 1.1+ 以确保所有功能的正常使用 ...

  3. spring boot @Scheduled未生效原因以及相关坑、及相对其他定时任务架构的优势

    在spring boot中,支持多种定时执行模式(cron, fixRate, fixDelay),在Application或者其他Autoconfig上增加@EnableScheduling注解开启 ...

  4. linux下配置nginx使用ftp目录作为静态资源文件的目标目录

    1.安装ftp服务,可以直接yum install vsftpd. 2.设置随机启动,chkconfig vsftpd on. 3.启动ftp服务,service vsftpd start. 4.配置 ...

  5. eclipse在注释时候字体变成繁体字

    输入法和java中的快捷键冲突了,按下ctrl+shift+F就切换回去了

  6. Android图片裁剪解决方案 -- 从相册截图

    在看Storage Access Framework,里面有一个加载相册图片的程序片断,可能是系统版本的问题,无法返回结果,这里找到一个适用于旧版本的方法. 在Android开发中,可以轻松调用一个I ...

  7. [C++ Primer Plus] 第2章、开始学习c++

    一.程序清单2.1(代码和书略不一样) #include<iostream> using namespace std;//使用std这个命名空间,才能正确找到cin和cout,如果不使用命 ...

  8. Building a Keras + deep learning REST API（三部曲之一）

    一.基本环境 )     image = imagenet_utils.preprocess_input(image)     , ))             ]:                  ...

  9. 浅谈k短路算法

    An Old but Classic Problem 给定一个$n$个点,$m$条边的带正权有向图.给定$s$和$t$,询问$s$到$t$的所有权和为正路径中,第$k$短的长度. Notice 定义两 ...

  10. ERROR: please install the following Perl modules before executing ./mysql_install_db

    centos7.5 安装mysql数据库报错 问题: [root@db02-52 scripts]# ./mysql_install_db --user=mysql --basedir=/applic ...