//第一步:编写模版。你可以使用一个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;
});

layui template list的更多相关文章

  1. layui topbar图标(即返回顶部)未显示的解决方法

    在自己搭建纯html模板的时候,遇到了topbar无法显示的问题,搜了社区都没啥有用的解决方法,于是引用了util.js的源文件,发现用dom变量未获取到正确的scrollTop值,经过反复测试,把这 ...

  2. layui表格-template模板的三种用法

    问题情境: layui中将数据库数据通过layui table渲染到前端表格,非常简单,但是如果数据库存储的信息不能被直接展示,项目中该页面有好几个这样的字段,会员类型,支付类型,会员时长还有平台类型 ...

  3. layui流加载+h5自带模板

    @{ ViewBag.Title = "服务列表"; Layout = "~/Areas/hahaha/Views/Shared/_Head.cshtml"; ...

  4. 模板引擎文档 - layui.laytpl 介绍

    <!DOCTYPE html> <html class="ui-page-login"> <head> <meta charset=&qu ...

  5. 基于layui+cropper.js实现上传图片的裁剪功能

    最近因项目需求,需要在上传图片的时候先对图片裁剪,然后在上传,所以就有了本文的出现. 开始正文之前,要提一下这个图片的裁剪:图片的裁剪,有前端裁剪,也可以后端裁剪 前端的裁剪我知道的可以分为这么两种: ...

  6. 记一次解决layui 的bug - layer.open 与 layui渲染问题

    场景是这样的,通过layer打开一个弹窗,里面放置一个表单,表单是用layui来渲染的. 当弹窗完成之后,我需要渲染表单中的一些内容.譬如laydate. layer.open({ type: 1, ...

  7. 怎么在vue中引入layui

    新项目想用layui框架,学习了把前辈是怎么引入layui的,这里记录下 1.index.html要引入layui.js文件 <script src="/static/layui/la ...

  8. Layui上传文件以及数据表格

    layui对于一些前端小白来说,例如我,真的非常的好用,不用去花很多很多的心思在前端美化中,并且提高了很大的工作效率.所以建议一些觉得自己前端技术不是很强,但是想让前端美化一点的可以使用layui. ...

  9. LayUI后台管理与综合示例

    一.LayUI介绍 layui(谐音:类UI) 是一款采用自身模块规范编写的前端 UI 框架,遵循原生 HTML/CSS/JS 的书写与组织形式,门槛极低,拿来即用.其外在极简,却又不失饱满的内在,体 ...

随机推荐

  1. 【JavaScript】js中的构造函数,和构造函数的实例中的原型详解

    1. 构造函数作为一个对象,他也有他的原型属性,即.prototype:该属性指向的原型对象是Object. 2. 而构造函数产生的实例却没有.prototype属性,但是作为一个对象,该实例却仍然拥 ...

  2. 编辑docker容器中的文件

    一般docker中没有VI或者其它相应的文本编辑器,为了写个东西安装个vi就可以解决问题,除此之外还有别的办法 登陆docker中找到需要编辑的文件的位置 sudo docker ps -a sudo ...

  3. python如何编译py文件生成pyc、pyo、pyd以及如何和C语言结合使用

    python执行py文件的流程 当我们执行一个py文件的时候,直接python xx.py即可,那么这个流程是怎么样的呢.先说明一下,python执行代码实际上是先打开文件然后执行里面的代码,所以文件 ...

  4. STM32 stm32fxxx_flash.icf文件的作用详解

    文章转载自:https://blog.csdn.net/weibo1230123/article/details/80142210 每个芯片开发商都会针对每款芯片来编写一个.icf文件就是传说中的链接 ...

  5. python常用模块:项目目录规范、定制程序入口、自定义模块、引用变量、time和datetime模块

    今天讲课内容有两大部分: 一.文件目录规范二.定制程序入口三.使用标准目录后四.常规函数time.datetime 一.标准目录规范 之前用过的案例atm机+购物商城代码过长,在学习了模块和包以后,我 ...

  6. Hadoop_11_HDFS的流式 API 操作

    对于MapReduce等框架来说,需要有一套更底层的API来获取某个指定文件中的一部分数据,而不是一整个文件 因此使用流的方式来操作 HDFS上的文件,可以实现读取指定偏移量范围的数据 1.客户端测试 ...

  7. Mysqldump备份问题

    1.1 Mysqldump文件数打开过多 mysql> mysqldump -uroot -p131400 --all-databases >/backup/mysql.sql mysql ...

  8. ios系统保存校园网密码

    相信ios用户每次登陆时无法保存必须要重新输入账号密码的问题困扰了很多同学,特别是苹果5用户(不要问为什么,屏幕本来就小) 现在我们就一起想办法来解决它吧! 首先,我们进入设置->Safari浏 ...

  9. 服务器syns to listen sockets drop导致创建socket失败

    在一次测试执行过程中,发现服务器TCP发送队列较长,执行netstat -s | grep LISTEN,发现有SYNs包被丢弃,但是没有times the listen queue of a soc ...

  10. mysqltuner对数据库的优化

    主要用于对mysql配置及my.cnf配置检查,提供详细信息,为进一步优化mysql做参考. 下载地址: (1)http://mysqltuner.com/ (2)脚本获取# wget -c http ...