模板引擎文档 - layui.laytpl 介绍

Posted starksoft

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了模板引擎文档 - layui.laytpl 介绍相关的知识，希望对你有一定的参考价值。

<!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 介绍的主要内容，如果未能解决你的问题，请参考以下文章

layui 模板里面使用第三方方法

freemaker模板引擎使用详解

Laravel模板引擎Blade中section的一些标签的区别介绍

doT.js 模板引擎

武汉企业网站设计武汉搜索引擎优化包括以下哪些内容武汉百度seo排名优化提高流量武汉百度代发帖包收录武汉网页设计模板和源代码多少钱

Spring Boot系列——模板引擎thymeleaf