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. 在centos上搭建JavaWeb环境（jdk+mysql+tomcat）

    1.安装OpenJDK yum list java* -openjdk* -y java -version 2.安装Tomcat cd /usr/local wget https://mc.qclou ...

  2. 使用Holer将本地端口映射到公网

    What is holer Holerexposes local servers behind NATs and firewalls to the public internet over secur ...

  3. 关于HashSet的equals和hashcode的重写

    关于HashSet的equals和hashcode的重写:package Test; import java.util.HashSet; import java.util.Set; public cl ...

  4. Spring/SpringMVC/MyBatis（持久层、业务层、控制层思路小结）

    准备工作: ## 7 导入省市区数据到数据库中 1. 从FTP下载SQL脚本文件 2. 把脚本文件移动到易于描述绝对路径的位置 3. 进入MySQL控制台 4. 使用`xxx_xxx`数据库 5. 运 ...

  5. org.springframework.jdbc.UncategorizedSQLException

    org.springframework.jdbc.UncategorizedSQLException: StatementCallback; uncategorized SQLException fo ...

  6. linux下nginx编译安装

    步骤: 1.获取nginx安装包. 进入nginx官网:http://nginx.org/ 找到稳定版本: 点击红框内的链接. 使用wget获取安装包. wget http://nginx.org/d ...

  7. php 查找字符串里面中文字符第一次出现的位置，并插入字符串

    //查找字符串里面中文字符第一次出现的位置,并插入字符串 function find_first_chinese_insert($str,$insert_str){ $count = mb_strle ...

  8. Keil uVision4 创建51单片机工程

    Keil uVision4 创建51单片机工程 版权声明:未经授权,严禁转载! 在学习51单片机的过程当中,我们需要使用 Keil uVision4 来创建一个项目,今天就来图示一下创建的流程. 首先 ...

  9. json排序 及替换在字符串中全部替换某字符串

    var roadLine = '@ViewBag.RoadLine'; var jsonRoadLine = JSON.parse(roadLine.replace(/"/g, '\&quo ...

  10. Linux-eval

    shell中eval的用法示例: 语 法:eval [参数] 功能说明:eval会对后面的[参数]进行两遍扫描,如果在第一遍扫面后cmdLine是一个普通命令,则执行此命令:如果cmdLine中含有变 ...