<!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. centos 搭建svn服务器

    1 安装svnserve yum install subversion -y 2 创建仓库 mkdir /svn/rep1 -p mkdir /svn/rep2 -p svnadmin create ...

  2. ps：选区的存储及载入

    有时候需要把已经创建好的选区存储起来,方便以后再次使用.就要使用选区存储功能. 创建选区后,直接点击右键(限于选取工具)出现的菜单中就“存储选区”项目.也可以使用菜单[选择 存储选区].会出现一个名称 ...

  3. Oracle Internals Notes Redo Write Triggers

    There are four conditions that cause LGWR to perform a redo write. When LGWR is idle, it sleeps on a ...

  4. web项目分层设计

    model.dao.service.controller之间的关系,还有util和task的简介 model: 与数据库中的表一一对应,实现set和get的方法.

  5. exec()和元类

    目录 一.exec()的作用 二.元类 2.1什么是元类,元类的作用是什么? 2.2自定义创建元类 一.exec()的作用 exec执行储存在字符串或文件中的 Python 语句,相比于 eval,e ...

  6. MapGIS IGServer for java

    但是安装完之后,服务里面没有找到igserver服务 IGServer SManager cxf 怎么会找不到类呢?是服务映射出了问题,所以目录找不到.所以怎么配置目录呢?是在xml还是环境变量,还是 ...

  7. django缓存优化（一）

    在配置之前,先介绍一个实用的工具: 当我们进入虚拟环境,在shell中进行操作的时候,往往要导入django的各种配置文件: from django.x import xxxx 这时我们可以借助dja ...

  8. 洛谷P1288 取数游戏II（博弈）

    洛谷P1288 取数游戏II 先手必胜的条件需要满足如下中至少 \(1\) 条: 从初始位置向左走到第一个 \(0\) 的位置,经过边的数目为偶数(包含 \(0\) 这条边). 从初始位置向右走到第一 ...

  9. 535D Tavas and Malekas

    题目大意 给你一个串和m个下标 问你一个长度为n的串每一个下标开始的后缀的前缀都包含给定的串的方案数 分析 对于给定的串求出z数组 对于两个串不重叠的情况就是中间都不包含的数随便填即可 对于重叠的情况 ...

  10. 什么时候需要用的Vue.nextTick()

    什么时候需要用的Vue.nextTick() 你在Vue生命周期的created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中.原因是什么呢,原因是在created() ...