layui template list
//第一步:编写模版。你可以使用一个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的更多相关文章
- layui topbar图标(即返回顶部)未显示的解决方法
在自己搭建纯html模板的时候,遇到了topbar无法显示的问题,搜了社区都没啥有用的解决方法,于是引用了util.js的源文件,发现用dom变量未获取到正确的scrollTop值,经过反复测试,把这 ...
- layui表格-template模板的三种用法
问题情境: layui中将数据库数据通过layui table渲染到前端表格,非常简单,但是如果数据库存储的信息不能被直接展示,项目中该页面有好几个这样的字段,会员类型,支付类型,会员时长还有平台类型 ...
- layui流加载+h5自带模板
@{ ViewBag.Title = "服务列表"; Layout = "~/Areas/hahaha/Views/Shared/_Head.cshtml"; ...
- 模板引擎文档 - layui.laytpl 介绍
<!DOCTYPE html> <html class="ui-page-login"> <head> <meta charset=&qu ...
- 基于layui+cropper.js实现上传图片的裁剪功能
最近因项目需求,需要在上传图片的时候先对图片裁剪,然后在上传,所以就有了本文的出现. 开始正文之前,要提一下这个图片的裁剪:图片的裁剪,有前端裁剪,也可以后端裁剪 前端的裁剪我知道的可以分为这么两种: ...
- 记一次解决layui 的bug - layer.open 与 layui渲染问题
场景是这样的,通过layer打开一个弹窗,里面放置一个表单,表单是用layui来渲染的. 当弹窗完成之后,我需要渲染表单中的一些内容.譬如laydate. layer.open({ type: 1, ...
- 怎么在vue中引入layui
新项目想用layui框架,学习了把前辈是怎么引入layui的,这里记录下 1.index.html要引入layui.js文件 <script src="/static/layui/la ...
- Layui上传文件以及数据表格
layui对于一些前端小白来说,例如我,真的非常的好用,不用去花很多很多的心思在前端美化中,并且提高了很大的工作效率.所以建议一些觉得自己前端技术不是很强,但是想让前端美化一点的可以使用layui. ...
- LayUI后台管理与综合示例
一.LayUI介绍 layui(谐音:类UI) 是一款采用自身模块规范编写的前端 UI 框架,遵循原生 HTML/CSS/JS 的书写与组织形式,门槛极低,拿来即用.其外在极简,却又不失饱满的内在,体 ...
随机推荐
- js弹窗返回值详解(window.open方式)
今天在改公司一个老系统时,碰到了window.open()的这个语法.虽然这个方法有点老,不太用了.所以有点不清楚父级弹框如何获取子级页面返回的值.为了解决这个问题,上网搜了一下.原作者参考网址:ht ...
- struct:二进制数据结构的打包与解包
介绍 struct模块包括一些函数,这些函数可以完成字节串与原生Python数据类型(如数字和字符串)之间的转换 函数与Struct类 struct提供了一组处理结构值的模块级函数,另外还有一个Str ...
- Java的概述
Java的基本概述 Java是SUN(Stanford University Network),斯坦福大学网络公司)1995年推出的一门高级编程语言.Java是一种面向Internet的编程语言.随着 ...
- mybatis-03
mybatis-03 1.mybatis的别名[两种]在MyBatis中可以为变量类型定义别名.简化映射文件的定义,在核心配置文件中定义的别名.别名应用:MyBatis框架先将resultType定义 ...
- lib异步中断
基于libusbx-1.0.18-rc1,libusbx现已重新merage到libusb.1. 初始化使用libusb_init初始化libusb,如果是单设备通信,ctx参数可以传NULL,表示使 ...
- Linux文件归档管理
Linux怎样保存文件 数据 - 这里数据就是文件的内容 元数据 - 在linux系统中,所有与某个文件相关的额外信息都保存在一个叫做i-节点(inode)的结构中 文件名 - 文件名保存在名为目录项 ...
- BZOJ2238 Mst[最小生成树+树剖+线段树]
跑一遍mst.对于非mst上的边,显然删掉不影响. 如果删边在树上,相当于这时剩下两个连通块.可以证明要重新构成mst只需要再加一条连接两个连通块的最小边,不会证,yy一下,因为原来连通块连的边权和已 ...
- JAVA bean为何要实现序列化
简而言之:序列化,就是为了在不同时间或不同平台的JVM之间共享实例对象.即序列化出于两个原因:①.用于持久化到磁盘上:②.用于作为数据流在网络上传输. 所谓的Serializable,就是java提供 ...
- php+memcache实现的网站在线人数统计
<?php $mc = new Memcache (); // 连接memcache $mc->connect ( ); // 获取 在线用户 IP 和 在线时间数据 $online_me ...
- 2017"百度之星"程序设计大赛 - 初赛(A) [ hdu 6108 小C的倍数问题 ] [ hdu 6109 数据分割 ] [ hdu 6110 路径交 ] [ hdu 6112 今夕何夕 ] [ hdu 6113 度度熊的01世界 ]
这套题体验极差. PROBLEM 1001 - 小C的倍数问题 题 OvO http://acm.hdu.edu.cn/showproblem.php?pid=6108 (2017"百度之星 ...