<!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. HTML和CSS美化 登入框的页面

    <div id="leftbody"> <p class="p0">如果您感觉您的网站够炫美可以提交给我们!</p> < ...

  2. python 递归求阶乘

    #用递归函数求 n 阶乘的值 def factorial(i): : else: )# sum=n*(n-)!所以直接调用自身 n=int(input('请输入阶乘数:')) ): print('%d ...

  3. 100W数据，测试索引

    两张表,结构相同,数据内容相同.唯一不同的就是是否包含索引.tf_user_index表中包含索引. 这100w数据,我造了近一天时间. mysql> select count(*) from ...

  4. mac上将代码上传到github以及github对100M以上文件限制上传的处理(lfs)。

    前言 有时我们会写一些小程序来学习新的知识,但是完事之后过一段时间可能会忘记,最好的办法就是找到原来的代码看一看.现在可以将代码免费托管到一些网站上,其中最著名的非github莫属了, 今天就把这个过 ...

  5. JavaScript权威指南--正则表达式

    知识要点 正则表达式,是一个描述字符模式的对象.javascript的RegExp类表示正则表达式,String和RegExp都定义了方法,后者使用正则表达式进行强大的模式匹配和文本检索与替换功能. ...

  6. Tornado的cookie过期问题

    首先,web应用程序是使用HTTP协议进行数据传输,因为HTTP协议是无状态的,所以一旦提交数据完成后,客户端和服务器端的连接就会被关闭,再次进行数据的交换就得重新建立新的连接,那么,有个问题就是服务 ...

  7. git基本操作，一篇文章就够了！

    1. git简介 git的通用操作流程如下图(来源于网络) 主要涉及到四个关键点: 工作区:本地电脑存放项目文件的地方,比如learnGitProject文件夹: 暂存区(Index/Stage):在 ...

  8. Ubuntu上识别不到安卓设备或者显示出“？？？？”，提示No Permission

    一:Ubuntu上识别不到安卓设备 1.lsusb找到设备的Vendor ID 2.cd ~/.android 3.vim adb_usb.ini 4.把设备的VendorID添加进来,如设备ID为2 ...

  9. 在ubuntu16上进行nginx+uwsgi+django部署的简要步骤

    网上有很多部署教程,说了一大堆,遇到坑还是要自己一个个解决,这里有几个比较重要的坑大家一定要注意. 1.首先要安装python和python-dev环境,如果没有安装python-dev后面安装有些依 ...

  10. 认识Applet和Ajax

    一.Applet 1.Applet的定义:Applet是采用Java编程语言编写的小应用程序,该程序可以包含在HTML(标准通用标记语言的一个应用)页中,与在页中包含图像的方式大致相同. Java写出 ...