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

时间:2022-08-24 08:32:23
<!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>