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. Android几种解析XML方式的比较

    https://blog.csdn.net/isee361820238/article/details/52371342 一.使用SAX解析XML SAX(Simple API for XML) 使用 ...

  2. SpringMVC之数据绑定

    SpringMVC之数据绑定 #数据绑定:Spring MVC会根据客户端请求参数的不同,将请求信息以一定的方式转换并绑定 到控制器类中的方法参数上. #说明:这里的“以一定的方式”应该指的是什么?过 ...

  3. BeanCreationException: Error creating bean with name 'transactionManager' defined

    BeanCreationException: Error creating bean with name 'transactionManager' defined in \WEB-INF\classe ...

  4. c语言cgi笔记

    直接输出接收的数据 #include <stdio.h>#include <stdlib.h>main(){int i,n;printf ("Content-type ...

  5. suse 12sp1 oracle 11g r2 时出现错误 调用/sysman/lib/ins_emagent.mk的目标nmo时出错

    要因为C库的问题,解决办法就是手动指定C库位置出现agent nmhs问题后,找到$ORACLE_HOME/sysman/lib/ins_emagent.mk文件,在文件里找字符串 $(MK_EMAG ...

  6. （6CBIR模拟问题）自己动手，编写神经网络程序，解决Mnist问题，并网络化部署

    个方面: 最初的图像检索研究主要集中在如何选择合适的全局特征去描述图像内容和采用什么样的相似性度量方法进行图像匹配. 第二个研究热点是基于区域的图像检索方法,其主要思想是图像分割技术提取出图像中的物体 ...

  7. Codeforces Round #425 (Div. 2) Problem B Petya and Exam (Codeforces 832B) - 暴力

    It's hard times now. Today Petya needs to score 100 points on Informatics exam. The tasks seem easy ...

  8. linux 压缩工具

    gzip gunzip zcat bzip2 bunzip2 bzcat xz unxz xzcat a:  gzip 用法 # gzip file  压缩文件 不会保留源文件 直接生成 file.g ...

  9. Linux 字符设备驱动开发基础（二）—— 编写简单 PWM 设备驱动【转】

    本文转载自:https://blog.csdn.net/zqixiao_09/article/details/50858776 版权声明:本文为博主原创文章,未经博主允许不得转载.    https: ...

  10. linux下如何按行将文件切割成多个小文件

    答: split -l <行数> <目标文件> <切割后的文件前缀> 举例如下: split -l 1000 jello.txt jello 将jello.txt文 ...