【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>

posted @ 2020-05-04 12:36 一只桔子2233 阅读(614) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

阅读排行：
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
· 单元测试从入门到精通
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理
· 上周热点回顾（3.3-3.9）
· winform 绘制太阳，地球，月球运作规律

公告

昵称：一只桔子2233
园龄： 8年3个月
粉丝： 16
关注： 18

+加关注

2025年3月

日

一

二

三

四

五

六

Kikyo

纸上得来终觉浅，绝知此事要躬行。

【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>