<!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. python 计算阶乘

    # 用for循环计算 n! sum = n=int(input('请输入n=')) ,n+): ,-): sum *= j # sum=sum*j print('%d!=%3d' %(i,sum)) ...

  2. python 读空的json文件

    读空的json文件,python2和python3 的错误提示是不一样的 python2: ValueError: No JSON object could be decoded python3: j ...

  3. 递归--练习2--noi6261汉诺塔

    递归--练习2--noi6261汉诺塔 一.心得 先把递推公式写出来,会很简单的 二.题目 6261:汉诺塔问题 总时间限制:  1000ms 内存限制:  65536kB 描述 约19世纪末,在欧州 ...

  4. SpringBoot全局异常处理方式

    每个项目全局异常处理非常重要, 今天在处理项目架构的时候添加了一个全局异常处理. 大概三种异常情况: 一:在进入Controller之前,譬如请求一个不存在的地址,404错误. 二:在执行@Reque ...

  5. Libpacp 深度剖析

    Libpacp 深度剖析 1. Libpacp 的工作原理 ​ Libpcap的工作原理可以描述为,当一个数据包到达网卡时,通过网络分接口(即旁路机制)将数据包发给BPF过滤器,匹配通过的数据包可以被 ...

  6. bzoj1069: [SCOI2007]最大土地面积 凸包+旋转卡壳求最大四边形面积

    在某块平面土地上有N个点,你可以选择其中的任意四个点,将这片土地围起来,当然,你希望这四个点围成的多边形面积最大. 题解:先求出凸包,O(n)枚举旋转卡壳,O(n)枚举另一个点,求最大四边形面积 /* ...

  7. recv,recvfrom,send,sendto

    一般情况下:send(),recv()用于TCP,sendto()及recvfrom()用于UDP 但是send(),recv()也可以用于UDP,sendto()及recvfrom()也可以用于TC ...

  8. 【Python】重载模块

    命令窗口中调试代码,往往需要重载模块已进行最新的代码调试. 主要有两种方式: 1. Python shell 窗口 reload(module) 2. ipython 窗口 %load_ext aut ...

  9. thread.event说明

    Python中的threading.Event()操控多线程的过程有: - 定义事件:man_talk_event = threading.Event() - 创建线程,传入对应事件:t1 = thr ...

  10. Arachni web扫描工具

    扫描工具-Arachni from:https://blog.csdn.net/zixuanfy/article/details/52818527 ./arachni_console         ...