2021-11-09 laytpl摘抄官方文档例子_laytpl 文档-优快云博客

本文通过实例演示了如何使用layui模板引擎在HTML中动态渲染数据，展示了如何创建一个包含模块名、别名和链接的列表。使用了layui.js库和jQuery，展示了数据绑定和遍历的技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>layui模板引擎</title>
    <script src="layuiadmin/layui/layui.js"></script>
    <script src="../Scripts/jquery-1.10.2.min.js"></script>
</head>
<body>
 
    <div id="view"></div>
 
    <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": "表单2", "alias": "form2" }, { "modname": "表单3", "alias": "form3" },
            { "modname": "弹层4", "alias": "layer4", "site": "layer.layui.com4" }, { "modname": "表单5", "alias": "form5" }
            ]
        };
        $(function () {
            layui.use('laytpl', function () {
                laytpl = layui.laytpl;
                var getTemplate = $('#demo').html();
 
                laytpl(getTemplate).render(data, function (html) {
                    $('#view').html(html);
                });
            });
        });
       
    </script>
</body>
</html>