//第一步:编写模版。你可以使用一个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. HTML5之客户端存储(Storage)

    关于客户端存储技术 storage 一.关于客户端(浏览器)存储技术 浏览器的存储技术第一个能想到的应该就是cookie,关于cookie本身出现的初衷是为了解决客户端识别,可存储信息量小(4k左右) ...

  2. CSS3总结四:盒模型(box)

    盒模型:标准盒模型.混杂盒模型 什么时候会触发混杂模式? 为什么要混杂模式渲染规则盒模型? box-sizing:content-box.border-box 关于盒模型的一些其他样式和属性值 一.盒 ...

  3. 关键词提取算法TF-IDF与TextRank

    一.前言 随着互联网的发展,数据的海量增长使得文本信息的分析与处理需求日益突显,而文本处理工作中关键词提取是基础工作之一. TF-IDF与TextRank是经典的关键词提取算法,需要掌握. 二.TF- ...

  4. OGG学习笔记03

    OGG学习笔记03-单向复制简单故障处理 环境:参考:OGG学习笔记02-单向复制配置实例实验目的:了解OGG简单故障的基本处理思路. 1. 故障现象故障现象:启动OGG源端的extract进程,da ...

  5. MySQL8.x msi版安装教程

    一.下载MySQL 官网下载地址 https://dev.mysql.com/downloads/windows/installer/8.0.html  下载第二个即可(虽然只有32位的 但是会同时安 ...

  6. Use pkgsrc on ARM

    What is this page? This page describes how to use pkgsrc on ARM architecture with EABI support. I bo ...

  7. deep_learning_Function_One-host参数

    在很多机器学习任务中,特征并不总是连续值,而有可能是分类值.比如星期类型,有星期一.星期二.…….星期日,比如浏览器类型有["uses Firefox", "uses C ...

  8. 二、CentOS 7安装部署GitLab服务器(解决邮箱发信问题)

    一.环境安装(10.0.0) 1.安装依赖软件 yum -y install policycoreutils policycoreutils-python openssh-server openssh ...

  9. 微信小程序开发(三)点击事件

    接着上篇博客继续. 如下修改: // index.wxml <view>Hello World!</view> <button bindtap="but&quo ...

  10. 5.java动态代理、反射

    1.java动态代理.反射(IDEA导入JUnit4) 1.1.反射 通过反射的方式可以获取class对象中的属性.方法.构造函数等 1.2.反射代码 import java.io.Serializa ...