layui系列一：模板引擎 layui.laytpl

最新推荐文章于 2024-04-22 13:04:56 发布

qingqingzijinxin

最新推荐文章于 2024-04-22 13:04:56 发布

阅读量1.8w

点赞数 6

分类专栏： layui 文章标签： layui laytpl 模板引擎

本文链接：https://blog.csdn.net/qingqingzijinxin/article/details/79214974

版权

layui 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

第一步：编写模版。你可以使用一个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>

第二步：建立视图。用于呈现渲染结果。

<div id="view"></div>

第三步：渲染模版

var data = { //数据
  "title":"Layui常用模块"
  ,"list":[{"modname":"弹层","alias":"layer","site":"layer.layui.com"},{"modname":"表单","alias":"form"}]
};
var getTpl = document.getElementById('demo').innerHTML
,view = document.getElementById('view');
laytpl(getTpl).render(data, function(html){
  view.innerHTML = html;
});

完整代码如下：

<!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>
  <link rel="stylesheet" href="../src/css/layui.css">
  <style>
    body{margin: 10px;}
    .demo-carousel{height: 200px; line-height: 200px; text-align: center;}
  </style>
</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 src="../src/layui.js"></script>
<script>
layui.use('laytpl', function(){
	laytpl=layui.laytpl;
	var data = { //数据
	  "title":"Layui常用模块"
	  ,"list":[{"modname":"弹层","alias":"layer","site":"layer.layui.com"},{"modname":"表单","alias":"form"}]
	};
	var getTpl=document.getElementById('demo').innerHTML
	,view = document.getElementById('view');
	laytpl(getTpl).render(data, function(html){
	  view.innerHTML = html;
	});
});
</script>
</body>
</html>

效果图：

qingqingzijinxin

关注

6
点赞
踩
16

收藏

觉得还不错? 一键收藏
3
评论
layui系列一：模板引擎 layui.laytpl

第一步：编写模版。你可以使用一个script标签存放模板，如： {{ d.title }} {{# layui.each(d.list, function(index, item){ }} {{ item.modname }} {{ item.alias }}： {{ item.site || '' }} {{# }
复制链接

扫一扫