<!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. 10 | MySQL为什么有时候会选错索引？ 学习记录

    <MySQL实战45讲>10 | MySQL为什么有时候会选错索引? 学习记录http://naotu.baidu.com/file/e7c521276650e80fe24584bc9a6 ...

  2. Sass-@extend

    Sass 中的 @extend 是用来扩展选择器或占位符.比如: .error { border: 1px #f00; background-color: #fdd; } .error.intrusi ...

  3. Springboot aop使用

    package com.jxd.Boot.aspect; import org.aspectj.lang.JoinPoint;import org.aspectj.lang.Signature;imp ...

  4. Multisim

    万用表 测量电压.电流.电阻 直流.交流 函数发生器XFG 正极.负极.公共端 可以产生正弦波.三角波和矩形波,可以设置信号参数:频率.占空比.幅度和偏移量等 示波器XSC 双通道示波器 4个连接点, ...

  5. python——解释型语言

    编程语言分三大类   :  低级语言  .  汇编语言 .   高级语言. 现代计算机都是基于  图灵机模型 制造的.  因此计算机的内部只能接受二进制数据.而用二进制代码  0  1  描述的指令叫 ...

  6. UE4开发PSVR游戏，使用RazorGPU进行调试的方法

    打开Project Launcher,如果没有需要的Devkit平台目标,就点下方的Device Manager,右键Claim 相应的目标.如果已经出现在Project Launcher中,点击上方 ...

  7. （转）CoreDNS介绍

    转:https://www.colabug.com/4171614.html 本文介绍 CoreDNS 相关配置以及验证方法,实验环境为 Kubernetes 1.11,搭建方法参考 kubeadm安 ...

  8. 51nod 1205 流水线调度

    1205 流水线调度 基准时间限制:1 秒 空间限制:131072 KB 分值: 40 难度:4级算法题  收藏  关注 N个作业{1,2,…,n}要在由2台机器M1和M2组成的流水线上完成加工.每个 ...

  9. 这才是Tomcat内存配置的正确姿势

    1.背景 虽然阅读了各大牛的博客或文章,但并没有找到特别全面的关于JVM内存分配方法的文章,很多都是复制黏贴 为了严谨,本文特别备注只介绍基于HotSpot VM虚拟机,并且基于JDK1.7的内存分配 ...

  10. Xmanger远程连接Centos7(成功配置)

    参考1:https://blog.csdn.net/wuzhimang/article/details/51523867 参考2:https://blog.csdn.net/name_kongkong ...