<!DOCTYPE html>

<html lang="zh-CN">

<head>

  <meta charset="UTF-8">

  <title>title</title>

</head>

<body>

</body>

</html>

<!-- 导入模板引擎 -->

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

<!-- 逻辑语句 条件 -->

<script id='ifTemplate' type="text/html">

  <ul>

    {{if male=='女'}}

    <li>欢迎您 {{name}} 女士

      <ol>

        <li>这是最新款的包包</li>

        <li>这是最新款的口红</li>

        <li>没想到,你竟然是{{skill}}</li>

      </ol>

    </li>

    {{else if male=='男'}}

      <li>欢迎您 {{name}} 先生

        <ol>

          <li>这是最新款的拖拉机</li>

          <li>讨厌,才来找人家</li>

          <li>没想到,你竟然稍长{{skill}}</li>

        </ol>

      </li>

    {{/if}}

  </ul>

</script>

<script>

  var person1 = {

    male: '女',

    name: '郑爽',

    skill: '身材好'

  };

  var person2 = {

    male: '男',

    name: '张翰',

    skill: '这篇鱼塘我承包了'

  };

  console.log(template('ifTemplate', person1));

  console.log(template('ifTemplate', person2));

</script>

<!-- 原文输出 -->

<script id='norTemplate' type="text/html">

  <ul>

    <li>{{name}}</li>

    <li>{{skill}}</li>

    <li>{{@info}}</li>

  </ul>

</script>

<script>

  var person = {

    name:'犬夜叉',

    skill:'变犬',

    info:'<a href="https://baike.baidu.com/item/%E7%8A%AC%E5%A4%9C%E5%8F%89/26878?fr=aladdin">犬夜叉</a>'

  }

  document.body.innerHTML = template('norTemplate',person);

</script>

<!-- 循环语句 -->

<script id='eachTemplate' type="text/html">

  <ul>

    <li>{{name}}</li>

    <li>兄弟们

        {{each brother}}

          <li>{{$value}}</li>

        {{/each}}

    </li>

    <li>家人们

      <ol>

        {{each family}}

        <li>{{$value.name}}---{{$value.skill}}</li>

        {{/each}}

      </ol>

    </li>

  </ul>

</script>

<script>

   var person = {

     name:'大娃',

     brother:[

       '二娃',

       '三娃',

       '水娃',

       '火娃',

       '千里眼娃',

       '瓜娃子'

     ],

     family:[

       {name:'爷爷',skill:'被抓'},

       {name:'穿山甲',skill:'到底说了什么'},

       {name:'小蝴蝶',skill:'撩--葫芦娃'}

     ]

   }

   console.log(template('eachTemplate',person));

</script>

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. html-webpack-plugin详解

    引言 我们来看看主要作用: 为html文件中引入的外部资源如script.link动态添加每次compile后的hash,防止引用缓存的外部文件问题 可以生成创建html入口文件,比如单页面可以生成一 ...

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

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

  9. webpack学习笔记 (二) html-webpack-plugin使用

    这个插件的两个作用: 为html文件中引入的外部资源如script.link动态添加每次compile后的hash,防止引用缓存的外部文件问题 可以生成创建html入口文件,比如单页面可以生成一个ht ...

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

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

随机推荐

  1. Spring如何解决循环依赖问题

    目录 1. 什么是循环依赖? 2. 怎么检测是否存在循环依赖 3. Spring怎么解决循环依赖 本文主要是分析Spring bean的循环依赖,以及Spring的解决方式. 通过这种解决方式,我们可 ...

  2. JS基础入门篇（七）—运算符

    1.算术运算符 1.算术运算符 算术运算符:+ ,- ,* ,/ ,%(取余) ,++ ,-- . 重点:++和--前置和后置的区别. 1.1 前置 ++ 和 后置 ++ 前置++:先自增值,再使用值 ...

  3. redis心得体会

    redis简介: 在我们日常的Java Web开发中,无不都是使用数据库来进行数据的存储,由于一般的系统任务中通常不会存在高并发的情况,所以这样看起来并没有什么问题,可是一旦涉及大数据量的需求,比如一 ...

  4. js reduce用法

    let books = [ 0, {bookName:"python",price:10,count:1}, {bookName:"Ruby",count:2, ...

  5. Dubbo学习-2-注册中心搭建

    1.Dubbo支持如下几种注册中心,推荐使用zookeeper来作为注册中心. 2. 下载zookeeper https://zookeeper.apache.org/releases.html#do ...

  6. 【Java】Java调用第三方接口

    Get请求与Http请求 https://www.w3school.com.cn/tags/html_ref_httpmethods.asp HttpClient HTTP 协议可能是现在 Inter ...

  7. 安卓环境home assistant搭建

    准备搞个智能家居玩玩 先从home assistant(后面简写为HASS)开始吧 莫得树莓派,拿旧手机凑活一下 准备材料: root过的安卓机 一.安卓机Linux环境搭建 个人习惯不详细写基础环境 ...

  8. Python_007(深浅拷贝)

    一.基础数据类型的补充 1.其他类型之间的相互转换 例如:str = int(str) str => int; int = list(int) int => list;  tuple = ...

  9. [CSP-S模拟测试]:甜圈（线段树）

    题目描述 $D$先生,是一个了不起的甜甜圈制造商.今天,他的厨房准备在日出之前制作甜甜圈.$D$先生瞬间完成了$N$个油炸圈饼.但是,这些油炸圈饼得先经过各种装饰任务才可以成为甜甜圈销售:填充奶油,浸 ...

  10. spring boot中@ControllerAdvice的用法

    @ControllerAdvice ,这是一个增强的 Controller.使用这个 Controller ,可以实现三个方面的功能: 全局异常处理 全局数据绑定 全局数据预处理 灵活使用这三个功能, ...