layui template list

最新推荐文章于 2025-05-09 12:05:35 发布

weixin_30947043

最新推荐文章于 2025-05-09 12:05:35 发布

阅读量484

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/xidianzxm/p/11310399.html

本文介绍了一种使用laytpl模板引擎进行前端数据渲染的方法，通过具体示例展示了如何编写模板、建立视图及渲染过程，适用于前端开发人员学习和参考。

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

//第一步：编写模版。你可以使用一个script标签存放模板，如：
<script id="demo" type="text/html">
<h1>{{ d.title }}</h1>
<ul>
{{# for(var i = 0, len = d.list.length; i < len; i++){ }}
  <li>
    <span>姓名：{{ d.list[i].name }}</span>
    <span>城市：{{ d.list[i].city }}</span>
  </li>
{{# } }}
</ul>
</script>

//第二步：建立视图。用于呈现渲染结果。
<div id="view"></div>

//第三步：渲染模版
var data = {
  title: ‘前端攻城师‘,
  list: [{name: ‘贤心‘, city: ‘杭州‘}, {name: ‘谢亮‘, city: ‘北京‘}, {name: ‘浅浅‘, city: ‘杭州‘}, {name: ‘Dem‘, city: ‘北京‘}]
};
var gettpl = document.getElementById(‘demo‘).innerHTML;
laytpl(gettpl).render(data, function(html){
  document.getElementById(‘view‘).innerHTML = html;
});

转载于:https://www.cnblogs.com/xidianzxm/p/11310399.html