1. <!DOCTYPE html>
  2. <html class="ui-page-login">
  3.  
  4.     <head>
  5.         <meta charset="utf-8">
  6.         <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  7.         <title>laytpl模板引擎实例</title>
  8.         <!--CSS-->
  9.         <script src="js/laytpl/laytpl.js"></script>
  10.  
  11.         <script>
  12.             //第三步：渲染模版
  13.  
  14.             //数据
  15.              var data = {
  16.                title: '前端卷子',
  17.                intro: '一群码js的骚年，幻想改变世界，却被世界改变。',
  18.                list: [{ name: '贤心', city: '杭州' }, { name: '谢亮', city: '北京' }, { name: '浅浅', city: '杭州' }]
  19.              };
  20.  
  21.              window.onload = function () {
  22.                var gettpl = document.getElementById('testTpl').innerHTML;
  23.                laytpl(gettpl).render(data, function (html) {
  24.                  //得到的模板渲染到html
  25.                  document.getElementById('testDiv').innerHTML = html;
  26.                });
  27.              }
  28.         </script>
  29.     </head>
  30.  
  31.     <body>
  32.  
  33.         <!-- 第一步：编写模版。你可以使用一个script标签存放模板，如： -->
  34.         <script id="testTpl" type="text/html">
  35.          <h1>{{ d.title }}</h1>
  36.          <p>{{d.intro}}</p>
  37.          <ul>
  38.            {{# for(var i = 0; i < d.list.length; i++){ }}
  39.            <li>
  40.              <span>姓名：{{ d.list[i].name }}</span>
  41.              <span>城市：{{ d.list[i].city }}</span>
  42.            </li>
  43.            {{# } }}
  44.          </ul>
  45.        </script>
  46.  
  47.        <!-- 第二步：建立视图。用于呈现渲染结果。 -->
  48.        <div id="testDiv"></div>
  49.     </body>
  50.  
  51. </html>

模板语法

语法 说明 示例
{{ d.field }} 输出一个普通字段，不转义html

<div>{{ d.content }}</div>
{{= d.field }} 输出一个普通字段，并转义html

<h2>{{= d.title }}</h2>
{{# JavaScript表达式 }} JS 语句。一般用于逻辑处理。用分隔符加 # 号开头。

注意：如果你是想输出一个函数，正确的写法是：{{ fn() }}，而不是：{{# fn() }}

{{#var fn = function(){return '2017-08-18';};

}}

{{# if(true){ }}开始日期：{{ fn() }}

{{# } else { }}已截止{{# } }}
{{! template !}} 对一段指定的模板区域进行过滤，即不解析该区域的模板。注：layui 2.1.6 新增

<div> {{! 这里面的模板不会被解析 !}}</div>

模板引擎文档 - layui.laytpl 介绍的更多相关文章

  1. Laravel 模板引擎Blade中标签详细介绍

    这篇文章主要介绍了Laravel模板引擎Blade中section的一些标签的区别介绍,需要的朋友可以来看看. Laravel 框架中的Blade模板引擎很好用,但是官方文档介绍的并不详细,我接下来将 ...

  2. Sandcastle帮助文档生成器使用介绍

    一.软件介绍       Sandcastle是一个管理类库的文档编译器,是用于编译发布组件(Assembly)信息的一个工具,这个工具通过反射和Xslt技术,可以从dll文件及其xml注释(命令行编 ...

  3. ES 文档与索引介绍

    在之前的文章中,介绍了 ES 整体的架构和内容,这篇主要针对 ES 最小的存储单位 - 文档以及由文档组成的索引进行详细介绍. 会涉及到如下的内容: 文档的 CURD 操作. Dynamic Mapp ...

  4. IE11新文档模式Edge介绍与评估，及在WebBrowser应用中的使用。

    浏览器模式与文档模式概念是怎么来的? 1.浏览器模式与文档模式概念起源 为了解决兼容性的问题,在IE浏览器(IE8, IE9, IE10)中,引入了浏览器模式和文档模式两个概念,浏览网页时可以通过按F ...

  5. rbac介绍、自动生成接口文档、jwt介绍与快速签发认证、jwt定制返回格式

    今日内容概要 RBAC 自动生成接口文档 jwt介绍与快速使用 jwt定制返回格式 jwt源码分析 内容详细 1.RBAC(重要) # RBAC 是基于角色的访问控制(Role-Based Acces ...

  6. HTML文档及标签介绍

    HTML标签 HTML 标记标签通常被称为 HTML 标签 (HTML tag). HTML标签是由尖括号包含的关键词,比如<html> HTML标签通常是成对出现的,比如<body ...

  7. 四种生成和解析XML文档的方法介绍

    解析XML的方法越来越多,但主流的方法也就四种,即:DOM.SAX.JDOM和DOM4J 1.DOM(Document Object Model) DOM是用与平台和语言无关的方式表示XML文档的官方 ...

  8. supesite 模板相关文档记录

    文件说明:http://wenku.baidu.com/view/69c07820af45b307e87197ac.html 开发文档:http://wenku.baidu.com/view/35f6 ...

  9. 弹层组件文档 - layui.layer

    http://www.layui.com/doc/modules/layer.html

随机推荐

  1. django网站

    https://www.djangoproject.com/download/ 指定版本安装django命令:pip install Django==1.11.8

  2. android------引导页两种实现方式（原生和WebView网页实现）

    有的App当你第一次打开的是和常常会有引导页来描述一些App信息(功能,特点),当然也要做验证,验证第二次进入不进入引导页,直接进入App,此博客借助ViewPager来实现引导页, ViewPage ...

  3. Leetcode 23.Merge Two Sorted Lists Merge K Sorted Lists

    Merge Two Sorted Lists Merge two sorted linked lists and return it as a new list. The new list shoul ...

  4. Java网络编程和NIO详解6：Linux epoll实现原理详解

    Java网络编程和NIO详解6:Linux epoll实现原理详解 本系列文章首发于我的个人博客:https://h2pl.github.io/ 欢迎阅览我的CSDN专栏:Java网络编程和NIO h ...

  5. Uedit个人专注

    Uedit个人专注   Windows Registry Editor Version 5.00 [HKEY_CLASSES_ROOT\*\Shell\Uedit] [HKEY_CLASSES_ROO ...

  6. halcon之屌炸天的自标定（2）

    自 halcon之屌炸天的自标定(1)发出以后,有朋友看了文章也应用到了自己的测量项目中,效果奇好,成功搞定了20um的需求,可喜可贺.   在halcon之屌炸天的自标定(1)中我提到了一片论文: ...

  7. 重写ajax方法实现特定情况下跳转登录页面

    jQuery(function($){ // 备份jquery的ajax方法 var _ajax=$.ajax; // 重写ajax方法, $.ajax=function(opt){ var _suc ...

  8. flv格式的播放代码

    <object classid="clsid:D27CDB6E-AE6D-444553540000" class="player2" codebase=& ...

  9. Android filesystem system rw(read/write) permission

    /********************************************************************************* * Android filesys ...

  10. PTA编程总

    7-1 币值转换 (20 分) 输入一个整数(位数不超过9位)代表一个人民币值(单位为元),请转换成财务要求的大写中文格式.如23108元,转换后变成“贰万叁仟壹百零捌”元.为了简化输出,用小写英文字 ...