layui框架学习(37:学习laytpl基本语法)

news/2024/11/16 13:49:22/

  layui中的模板引擎模块laytpl属于轻量的 JavaScript 模板引擎,支持在页面中将指定的数据按指定的模板进行展示或处理,此处的模板是指一段包含html和脚本的文本(感觉类似asp.net core中的razor标记语言,在网页中嵌入基于服务器的代码的标记语法)。Layui的数据表格模块支持列设置基于laytpl语法的自定义模板,从而使列展现特定的内容或样式。由于之前没有接触过laytpl语法,本文学习并记录laytpl语法的基本用法,以便后续更好地学习tree数据表格模块中的自定义列模板用法及示例。
  laytpl模块解析模板主要通过render函数,其调用形式如下,其中template参数为包含laytpl语言的模板字符串,data为待处理的数据,供template使用,html为基于data和template的模板解析结果,供回调函数使用。

	laytpl(template).render(data, function(html)laytpl(template).render(data);//返回解析结果

在这里插入图片描述
  laytpl基本语法主要包括四类,均以“{{”开头,以“}}”结尾(也可以自定义分隔符,详见参考文献2)。:
  1){{ d.field }}或{{= d.field }}。输出数据中的指定属性内容,如果存在 HTML,将进行转义。不带html及带html内容的测试效果如下图所示:

在这里插入图片描述在这里插入图片描述
  2){{= d.field }}。转义输出,若字段存在 HTML,将进行转义。带html内容的测试效果如下图所示:
在这里插入图片描述
  3){{# JavaScript 语句 }},支持嵌入JavaScript 语句,一般用于逻辑处理(参考文献6中给出了条件语句和循环语句的写法)。带html内容的循环语句测试效果如下图所示:在这里插入图片描述  模板字符串的存放位置,可以直接作为输入参数嵌入laytpl语句中,也可以用script标签嵌入网页内,需要时提取使用即可,详细的可以查看参考文献6-7,在此不再赘述。

参考文献:
[1]B站:layui框架精讲全套视频教程
[2]https://layui.gitee.io/v2/docs/
[3]https://layui.gitee.io/v2/demo/
[4]https://github.com/layui/layui/
[5]https://layui.gitee.io/v2/demo/laytpl.html
[6]https://blog.51cto.com/u_10535186/5382651
[7]https://blog.csdn.net/weixin_43664448/article/details/130142722


http://www.ppmy.cn/news/1050081.html

相关文章

在线求助。。npm i 报错,连公司内部网,无法连外网

各位前端朋友 ,有没有遇到我这种npm i 报错的问题。 公司内网,无法连外网,使用公司内部的Nexus镜像源 我在公司内网执行npm i 报错,报network连接失败。 我都已经在npm设置了内部镜像源,它为啥还要去外网下载呢。而…

测试框架pytest教程(6)钩子函数hook

在pytest中,"hook"是用于自定义和扩展测试流程的机制。它允许你在特定时间点插入自己的代码,以便对测试进行修改、补充或拦截。 pytest的hook是基于Python的插件系统实现的,使用特定的命名规范和装饰器来定义钩子函数。你可以在py…

欧拉计划44题

Pentagon numbers Pentagonal numbers are generated by the formula, . The first ten pentagonal numbers are: 1,5,12,22,35,51,70,92,117,145,… It can be seen that . However, their difference, 70−2248, is not pentagonal. Find the pair of pentagonal numbers, a…

课程项目设计--spring security--用户管理功能--宿舍管理系统--springboot后端

写在前面: 还要实习,每次时间好少呀,进度会比较慢一点 本文主要实现是用户管理相关功能。 前文项目建立 文章目录 验证码功能验证码配置验证码生成工具类添加依赖功能测试编写controller接口启动项目 security配置拦截器配置验证码拦截器 …

初学者SpringBoot+Vue打通前后端详细步骤(从零开始)

目录 前言介绍 一、整体流程介绍 二、后端SpringBoot项目创建 三、前端Vue项目创建 四、前后端连接 (一)后端配置 (二)前端配置 (三)前端页面与后端实体属性绑定并发起请求 五、前后端打通页面 前…

7-10 查验身份证

分数 15 全屏浏览题目 切换布局 作者 陈越 单位 浙江大学 一个合法的身份证号码由17位地区、日期编号和顺序编号加1位校验码组成。校验码的计算规则如下: 首先对前17位数字加权求和,权重分配为:{7,9,10&#xff0c…

使用python实现输出iOS图标文件AppIcon.appiconset

要实现这个功能,你可以使用Python的PIL库来处理图片,并使用json库来生成Contents.json文件。以下是一个示例代码: from PIL import Image import jsondef generate_app_icons(image_path, output_path):# 定义不同尺寸的App Icon大小sizes …

prometheus blackbox_exporter安装

目录 一、准备工作1.1 安装或关闭以下服务1.2 本次安装环境 二、安装blackbox_exporter2.1 下载并解压2.2配置2.3测试 三、配置blackbox_exporter3.1配置blackbox.yml3.2 开启blackbox_exporter3.3配置prometheus.yml 四、其他4.1server returned HTTP status 400 Bad Request …