layui 模板使用

1，建立试图

<div id="normal-exchange"  ><div id="exchange-infor" ></div>
</div>

2、建立模板

<script id="demo" type="text/html">{{# if(d.exrate==5) { }}                    5{{# }else if(d.exrate==1) { }}1{{# } }}</script>

3、创建json文件，模拟数据接口

{"code": 0,"msg": "","data": [{"url": "../../img/ad2.jpg","roomname": "七天酒店","exrate": "3","goodscount": 5}]
}

4、数据渲染

<script>layui.use(['laytpl','jquery'],function(){var laytpl = layui.laytpl,$ = layui.$;//渲染模板$(function(){$.ajax({url: './index.json',type: 'get',dataType: 'json',success: function (res) {//请求成功if(res.code==0){var htmlList = '';var data = res.data;var getTpl = demo.innerHTML;//将返回的数据以模板的形式显示出来$.each(data, function(index,elem) {//i为索引,el为当前对象htmlList += laytpl(getTpl).render(elem);});$('#exchange-infor').empty().append(htmlList);}}});});});</script>

layui 模板使用相关推荐

使用layui模板填充页面数据
layui,是一款采用自身模块规范编写的前端 UI 框架,遵循原生 HTML/CSS/JS 的书写与组织形式,门槛极低,拿来即用.其外在极简,却又不失饱满的内在,体积轻盈,组件丰盈,从核心代码到 AP ...
LayUI模板引擎渲染数据
前端模板引擎介绍接上节Spring boot项目开发实战--(LayUI实现前后端数据交换与定义方法渲染数据) 模板引擎能简化开发,极大提高效率,小编之前使用过JSP和Thymeleaf,以及pyt ...
html 开发中遇到的问题，ajax异步传输，layui模板引擎并重新渲染
1.实际中自己遇到的,比较杂乱绑定点击事件绑定enter事件 html A页面跳转到B页面,并传参.取值 layui模板引擎,渲染样式 Ajax 异步传输数据,动态更新内容绑定点击事件 < ...
怎样存储layui模板引擎后台返回的数据，在需要的时候获取
在项目中遇到一个情况,需要动态获取后台的返回数据,并在前台渲染出来,并且能够根据所点击的不同标签,随时获取对应数据.在网上看到两种方法,一种是写一个动态创建div模板的函数,并将返回值作为参数在其中展 ...
js layui 模板属性添加_layui.laytpl--模板引擎文档
与一般的字符拼接不同的是,laytpl 的模板可与数据分离,集中把逻辑处理放在 View 层,提升代码可维护性,尤其是针对大量模板渲染的情况. layui.use('laytpl', function ...
用layui 模板，数据表格展示图片,
1.1 layui数据表格展示图片的基础使用 js <script> layui.use(['tree', 'util','upload','table'], function(){var ...
layui模板引擎做动态增加和减少表单
效果显示目录结构代码 <!DOCTYPE html> <html lang="en"><head><meta charset=&quo ...
layui模板引擎laytpl判断为null或为空
<script type="text/html" id="stu_nameTpl">{{# if(d.stu_name==null || d.stu ...
layui模板引擎的使用
1,自定义数据 //发送请求$.ajax({type: "GET", dataType:'json',url: "http://merchant.shys-suda.co ...
Enjoy模板里使用layui模板引擎laytpl
注:https://jfinal.com/share/1023

layui 模板使用

layui 模板使用相关推荐

最新文章

热门文章