<!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. ref用于类类型

    static void Main(string[] args)         { Fruit f = new Fruit()      { Weight = 1, Color = "&qu ...

  2. c++ 插入容器元素（insert）

    #include <iostream> #include <vector> using namespace std; int main () { vector<int&g ...

  3. Adapter Class/Object（适配器）

    意图: 将一个类的接口转换成客户希望的另外一个接口.Adapter 模式使得原本由于接口不兼容而不能一起工作的那些类可以一起工作. 适用性: 你想使用一个已经存在的类,而它的接口不符合你的需求. 你想 ...

  4. 遗传算法 Genetic Algorithm

    2017-12-17 19:12:10 一.Evolutionary Algorithm 进化算法,也被成为是演化算法(evolutionary algorithms,简称EAs),它不是一个具体的算 ...

  5. hihocoder1513

    https://hihocoder.com/problemset/problem/1513 五维偏序问题,直接bitset压位,复杂度O(n^2/32) (本来想写三维偏序,但是cdq不会只好写写五维 ...

  6. nginx会话保持之sticky模块

    nginx会话保持之nginx-sticky-module模块 在使用负载均衡的时候会遇到会话保持的问题,常用的方法有:1.ip hash,根据客户端的IP,将请求分配到不同的服务器上:2.cooki ...

  7. [转载]从B 树、B+ 树、B* 树谈到R 树

    从B 树.B+ 树.B* 树谈到R 树 作者:July.weedge.Frankie.编程艺术室出品. 说明:本文从B树开始谈起,然后论述B+树.B*树,最后谈到R 树.其中B树.B+树及B*树部分由 ...

  8. 简单地为DBNavigator填加Caption

    http://bbs.2ccc.com/topic.asp?topicid=346735 http://www.cnblogs.com/GarfieldTom/archive/2010/01/18/1 ...

  9. 简单使用dom4j

    package com.dom4j; import java.io.FileWriter; import java.io.IOException; import java.io.Unsupported ...

  10. 《DSP using MATLAB》Problem 2.20

    代码: %% ------------------------------------------------------------------------ %% Output Info about ...