<!DOCTYPE html>

<html class="ui-page-login">

    <head>

        <meta charset="utf-8">

        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

        <title>laytpl模板引擎实例</title>

        <!--CSS-->

        <script src="js/laytpl/laytpl.js"></script>

        <script>

            //第三步：渲染模版

            //数据

             var data = {

               title: '前端卷子',

               intro: '一群码js的骚年，幻想改变世界，却被世界改变。',

               list: [{ name: '贤心', city: '杭州' }, { name: '谢亮', city: '北京' }, { name: '浅浅', city: '杭州' }]

             };

             window.onload = function () {

               var gettpl = document.getElementById('testTpl').innerHTML;

               laytpl(gettpl).render(data, function (html) {

                 //得到的模板渲染到html

                 document.getElementById('testDiv').innerHTML = html;

               });

             }

        </script>

    </head>

    <body>

        <!-- 第一步：编写模版。你可以使用一个script标签存放模板，如： -->

        <script id="testTpl" type="text/html">

         <h1>{{ d.title }}</h1>

         <p>{{d.intro}}</p>

         <ul>

           {{# for(var i = 0; i < d.list.length; i++){ }}

           <li>

             <span>姓名：{{ d.list[i].name }}</span>

             <span>城市：{{ d.list[i].city }}</span>

           </li>

           {{# } }}

         </ul>

       </script>

       <!-- 第二步：建立视图。用于呈现渲染结果。 -->

       <div id="testDiv"></div>

    </body>

</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. android平台蓝牙编程

    Android平台支持蓝牙网络协议栈,实现蓝牙设备之间数据的无线传输. 本文档描述了怎样利用android平台提供的蓝牙API去实现蓝牙设备之间的通信,蓝牙设备之间的通信主要包括了四个步骤:设置蓝牙设 ...

  2. 网络编程 单机最大tcp连接数

    在tcp应用中,server事先在某个固定端口监听,client主动发起连接,经过三路握手后建立tcp连接.那么对单机,其最大并发tcp连接数是多少? 如何标识一个TCP连接 在确定最大连接数之前,先 ...

  3. ORA-12505: TNS: 监听程序当前无法识别连接描述符中所给出的SID等错误解决方法

    程序连接orarle报ORA-12505错误 一.异常{ ORA-12505, TNS:listener does not currently know of SID given in connect ...

  4. Hadoop Ambari 安装

    ambari 1.2.4 下载地址:http://www.apache.org/dist/incubator/ambari/ambari-1.2.4/ambari-1.2.4-incubating.t ...

  5. hdu1847sg函数

    刚开始因为没注意到f是从0开始的导致wa了几次,f遍历的时候从0到f[j]<=i 这个题只有一个子情况,求出sg值直接判断就好了 #include<map> #include< ...

  6. windows下搭建svn服务器及权限配置

    服务器端VISUALSVN SERVER 3.3.1 下载地址 https://www.visualsvn.com/server/download/ 客户端TortoiseSVN 1.8.13下载地址 ...

  7. <NET CLR via c# 第4版>笔记 第7章 常量和字段

    7.1 常量 常量 是值从不变化的符号.定义常量符号时,它的值必须能够在编译时确定. 只能定义编译器识别的基元类型的常量,如果是非基元类型,需把值设为null. 常量的值直接嵌入代码,所以不能获取常量 ...

  8. Java中常用的日期操作方法

    日常项目当中经常会用到操作日期,抽出时间总结了一下,欢迎和大家多多沟通学习,如有任何改进意见和建议,我的QQ是1243672,欢迎联系哦. /** * 日期操作类 * 开发公司:北京东达悦科技有限公司 ...

  9. css中用#id.class的形式定义样式，为什么这样用，不直接写成.class.代码如下：#skin_0.selected{}这种的

    <ul class="skin"> <li id="skin_0" title="蓝色" class="sele ...

  10. jquery MD5

    /** * jQuery MD5 hash algorithm function * * <code> * Calculate the md5 hash of a String * Str ...