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. Django框架----Form组件补充

    一.Form类 创建Form类时,主要涉及到 [字段] 和 [插件],字段用于对用户请求数据的验证,插件用于自动生成HTML; 1.Django内置字段如下: 1 Field 2 required=T ...

  2. Kattis之旅——Factovisors

    The factorial function, n! is defined thus for n a non-negative integer: 0! = 1 n! = n * (n-1)! (n & ...

  3. kivy 滑动

    from kivy.uix.gridlayout import GridLayout from kivy.app import App from kivy.lang.builder import Bu ...

  4. H5+JS生成验证码

    效果图如下: <canvas id="canvas1" style="margin-left: 200px;"></canvas>< ...

  5. centos误删mysql root用户找回办法

    一天,我进入mysql后,查看所有用户 select host,user from mysql.user; 发现好多用户名, 太乱了,删除..... delete from user where us ...

  6. Python语言知识总结

    1. 环境 1.1 Anaconda 抛弃python原生安装方式吧,使用Anaconda才是最省心的. 1.2 Miniconda Anaconda 太大了,Miniconda才是王道!下载链接:h ...

  7. phpstorm 一个窗口打开多个项目

    参考:https://imshusheng.com/php/135.html 文件 -> 设置 -> 项目"XXX" -> Directories- > A ...

  8. bzoj 4445 小凸想跑步 - 半平面交

    题目传送门 vjudge的快速通道 bzoj的快速通道 题目大意 问在一个凸多边形内找一个点,连接这个点和所有顶点,使得与0号顶点,1号顶点构成的三角形是最小的概率. 假设点的位置是$(x, y)$, ...

  9. 动态规划之140 Word Break2

    这是一题不太明显的动态规划,主要考察的应该是深度优先搜索. static LinkedList<String> list = new LinkedList<String>(); ...

  10. CentOS6.8下安装Redis

    1.由于Redis是使用C语言开发的,安装时需要对Redis的源码进行编译,编译依赖gcc环境,如果没有gcc,需要先安装gcc: yum install gcc-c++ 2.安装完成后,进入Redi ...