zoukankan      html  css  js  c++  java
  • 【Layui__模板引擎】layui.laytpl

    layui.laytpl快速使用

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <link href="../lib/layui/css/layui.css" rel="stylesheet" />
    </head>
    <body>
    
        <div id="view"></div>
        <script src="../lib/layui/layui.js"></script>
        <script id="demo" type="text/html">
            <h3>{{ d.title }}</h3>
            <ul>
                {{#  layui.each(d.list, function(index, item){ }}
                <li>
                    <span>{{ item.modname }}</span>
                    <span>{{ item.alias }}:</span>
                    <span>{{ item.site || '' }}</span>
                </li>
                {{#  }); }}
                {{#  if(d.list.length === 0){ }}
                无数据
                {{#  } }}
            </ul>
        </script>
        <script>
            var data = { //数据
                "title": "Layui常用模块"
                , "list": [{ "modname": "弹层", "alias": "layer", "site": "layer.layui.com" }, { "modname": "表单", "alias": "form" }]
            }
            layui.use('laytpl', function () {
                var laytpl = layui.laytpl;
                var getTpl = demo.innerHTML
                    , view = document.getElementById('view');
                laytpl(getTpl).render(data, function (html) {
                    view.innerHTML = html;
                });
            });
        </script>
    </body>
    </html>
    
  • 相关阅读:
    oracle inside(5)
    oracle inside(4)
    WF & WCF(1)
    oracle inside(7)
    oracle inside(11)
    ArrayList使用toArray()构造数组时的问题
    在android下抓包
    为什么中国的程序员技术偏低
    [置顶] 女人与程序的对应关系!
    Java synchronized详解
  • 原文地址:https://www.cnblogs.com/kikyoqiang/p/12826145.html
Copyright © 2011-2022 走看看