<!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. window x86编译openssl vs2013

    1.下载OpenSSL,http://www.openssl.org/source/(Feb 8 18:29:10 2011 openssl-.0.0d.tar.gz[LATEST] ),winrar ...

  2. 前端每日实战：93# 视频演示如何用纯 CSS 创作一根闪电连接线

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/RBjdzZ 可交互视频 此视频是可 ...

  3. Windows系统安装教程

    身边很多朋友电脑系统因为这样那样的问题不能开机,需要重装系统,但是又不知道从何下手.很不建议去电脑店重装系统,因为电脑店用的操作系统很多都有捆绑软件和主页捆绑,对电脑体验影响很坏.这篇教程只是针对新手 ...

  4. 01 安装IDEA

    https://www.jetbrains.com 1 . 2

  5. Bugku 杂项 签到题

    签到题 加微信公众号会发现

  6. 如何从word中复制内容到网站后台编辑器中

    word图片转存,是指UEditor为了解决用户从word中复制了一篇图文混排的文章粘贴到编辑器之后,word文章中的图片数据无法显示在编辑器中,也无法提交到服务器上的问题而开发的一个操作简便的图片转 ...

  7. 五一清北学堂培训之数据结构（Day 1&Day 2）

    Day 1 前置知识: 二进制 2.基本语法 3.时间复杂度 正片       1.枚举 洛谷P1046陶陶摘苹果  入门题没什么好说的 判断素数:从2枚举到sqrt(n),若出现n的因子,则n是合数 ...

  8. linux安装.net core3.0

    https://docs.microsoft.com/zh-cn/dotnet/core/install/linux-package-manager-centos7 更新资料库 sudo rpm -U ...

  9. vs2017或vs2019添加引用时报错

    我先安装的是vs2019,进入VS命令提示符里后一直说:gacutil 不是有效的命令,一直没能解决,然后直接装了vs2017后,该命令可以使用了, 还是用VS2017吧,2019的版本感觉还有点问题 ...

  10. HttpSessionBindingListener和HttpSessionAttributeListener区别

    HttpSessionBindingListener和HttpSessionAttributeListener是两个经常让初学者弄混的监听器,其实它们有很大的区别.这2个监听器在文章中简称为Bindi ...