<!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. [python 学习] 编码

    一.源文件编码(encoding: utf-8) 1. python 2.x 默认按ascii编码读取源文件,源码中出现了ascii不能表示的字符 "的",所以报错(3.x版本不报 ...

  2. 修改编码为utf8mb4 以支持emoji表情

    环境: 项目db的所有字符集都已经初始化为utf-8,如 status命令显示如下: Server characterset: utf8Db characterset: utf8Client char ...

  3. django之请求和响应

    一:请求 1. 浏览器向服务器传参的几种方式: 方式一:通过正则的形式进行传递,名字为未命名模式 路由的正则形式: from django.conf.urls import url from . im ...

  4. gitignore 忽略文件

    *.project*.prefs*.classpath*.gitignore#ignore thumbnails created by windowsThumbs.db#Ignore files bu ...

  5. K个串

    题目链接 传送门 题解 看完题目后可以立刻想到:先算出最大值, 然后把最大值剔除掉,再找此时的最大值也就是次大值.这样重复\(k\)边即可找到第\(k\)大值. 于是我们只需要考虑找最大值了 我们可以 ...

  6. fiddler使用介绍

    Fiddler的详细介绍 Fiddler的详细介绍 一.Fiddler与其他抓包工具的区别 1.Firebug虽然可以抓包,但是对于分析http请求的详细信息,不够强大.模拟http请求的功能也不够, ...

  7. 记录一下LEETheme库主题切换的使用

    LEETheme库的位置:https://github.com/lixiang1994/LEETheme 从https://github.com/gsdios的SDAutolayoutDemo 中的白 ...

  8. Python3解leetcode Count Binary Substrings

    问题描述: Give a string s, count the number of non-empty (contiguous) substrings that have the same numb ...

  9. Python3解leetcode N-ary Tree Level Order Traversal

    问题描述: Given an n-ary tree, return the level order traversal of its nodes' values. (ie, from left to ...

  10. 「THUPC 2017」机场 / Airport

    https://loj.ac/problem/2403 题解 神仙题. 练习赛的时候想了个假建图. 正解太神仙了. 先把不合法情况判掉. 先对时间离散化,每个时间点开一个点. 然后把他们一次串起来,中 ...