<!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. Hive安装-windows（转载）

    1.安装hadoop 2.从maven中下载mysql-connector-java-5.1.26-bin.jar(或其他jar版本)放在hive目录下的lib文件夹 3.配置hive环境变量,HIV ...

  2. BZOJ 3930 【CQOI2015】 选数

    题目链接:选数 这种SB题我都Wa飞了,彻底没救系列- 首先,我们可以发现1,如果我们选了两个不同的数,那么它们的\(\gcd\)不会超过\(r-l+1\).于是,我们可以设一个\(f_i\)表示任取 ...

  3. python 计算字典value值的和

    my_dict = {,,} print(sum(my_dict.values()))

  4. 微信小程序-TabBar功能实现

    要实现tabbar的导航条其实很简单,我们要实现全局的tabbar只需要在app.json文件中定义即可,局部的就在局部的tabbar文件中实现. 来看看app.json代码: { "pag ...

  5. myeclipse:web项目不能显示Web App Libraries

    项目根路径下.classpath文件,加上 <classpathentry kind="con" path="org.eclipse.jst.j2ee.intern ...

  6. 基于Oracle的SQL优化（崔华著）-学习笔记

    201704171025 01. 列rows记录的就是执行计划中每一个执行步骤所对应的Cardinality的值 列Cost(%CPU)记录的就是执行计划中的每一个执行步骤对应的成本 02. Comp ...

  7. 处理XML Publisher导出EXCEL值变为科学计数法的问题

    <fo:bidi-override direction="ltr" unicode-bidi="bidi-override"><?PoOrde ...

  8. Digitalocean+DNSPod搭建Meteor.js博客Telescope.js

    1. 什么是Meteor.js 基于Node.js的一个快速开发平台. 简言之,Node.js>Meteor.js 对等于Ruby>Ruby on Rails的关系. 官网:http:// ...

  9. 如何处理HTML5新标签的兼容性问题

    支持HTML5新标签: * IE8/IE7/IE6支持通过document.createElement方法产生的标签, 可以利用这一特性让这些浏览器支持HTML5新标签, 浏览器支持新标签后,还需要添 ...

  10. ios 怎么禁止点击子视图的时候不响应父视图的点击事件

    方法一 可以在触发手势的方法里添加一个区域的判断,如果点击区域正好是子视图的区域,则过滤掉,不处理此时的手势,如果点击的区域没有被子视图覆盖则,处理手势的事件.具体的代码如下:  if( CGRect ...