Thymeleaf th:* 设置/修改属性值详解

Thymeleaf模板引擎:从核心语法到Spring Boot集成与PDF生成实战 模板引擎是现代Web开发中分离视图与业务逻辑的关键技术,它通过特定的语法规则将动态数据嵌入静态模板,实现页面的动态渲染。其核心原理在于解析模板中的占位符或指令,并用服务器端的数据进行替换,最终生成可响应的HTML。这项技术的价值在于提升开发效率、保证代码可维护性,并促进前后端协作。在Java生态中,模板引擎广泛应用于MVC架构的视图层,特别是在Spring Boot构建的Web应用中。本文聚焦Thymeleaf这一“自然模板”引擎,它允许模板文件作为合法的HTML被浏览器直接预览,同时通过丰富的表达式语法( 阅读详情

属性汇总

属性描述示例
th:text计算其值表达式并将结果设置为标签的标签体< p th:text="${userName}">中国</ p>,值为 null 为空时,整个标签不显示任何内容。
th:utextth:text 会对结果中的特殊字符转义,th:utext 不会转义< p th:utext="${userInfo}">中国</ p>,值为 null 为空时,整个标签不显示任何内容。
th:attr为标签中的任意属性设置,可以一次设置多个属性< a href="" th:attr=“title=‘前往百度’,href=‘http://baidu.com’”>前往百度</ a>
th:*为 html 指定的属性设值,一次设置一个< a href="" th:title=‘前往百度’ th:href="‘http://baidu.com’">前往百度</ a>
th:alt-title同时为 alt 与 title 属性赋值< a href="#" th:alt-title="‘th:A-B’">th:A-B</ a>
th:lang-xmllang同时为 lang 、xmllang 属性赋值< head lang=“en” th:lang-xmllang=“en”>
th:fragment定义模板片段< div th:fragment=“copy”>
th:insert将被引用的模板片段插⼊到自己的标签体中< div th:insert="~{footer :: copy}"></ div>
th:replace将被引用的模板片段替换掉自己< div th:replace=“footer :: copy”></ div>
th:include类似于 th:insert,⽽不是插⼊⽚段,它只插⼊此⽚段的内容< div th:include=“footer :: copy”></ div>
th:remove删除模板中的某些代码片段< tr th:remove=“all”>…
th:each迭代数据,如 数组、List、Map 等< tr th:each=“user : ${userList}”>…
th:if条件为 true 时,显示模板⽚段,否则不显示< p th:if="${isMarry}">已婚1</ p>
th:unless条件为 false 时,显示模板⽚段,否则不显示< p th:unless="!${isMarry}">已婚2</ p>
th:switch与 Java 中的 switch 语句等效,有条件地显示匹配的内容< div th:switch=“1”>
th:case配合 th:switch 使用< div th:switch=“1”>< p th:case=“0”>管理员</ p>< p th:case=“1”>操作员</ p>< p th:case="*">未知用户</ p></ div>
th:with定义局部变量< div th:with=“userFirst=${userList[0]}”>
th:inline禁用内联表达式,内联js,内联css< script type=“text/javascript” th:inline=“javascript”>

th:text 与 th:utext

th:text
属性用于计算其值表达式并将结果设置为标签的标签体。
对表达式中结果中的特殊字符默认会进行转义处理。
th:utext
属性 (unescaped text) 不会对结果进行转义。

th:attr 设置任意属性值

th:attr 通过⼀个表达式即可将值赋给任意的多个属性,th:attr 以逗号分隔的形式来设置多个属性值。

<body>
<!--设置 title 属性-->
<a href="http://baidu.com" th:attr="title='百度'">百度</a>
<!--设置 title、href 多个属性-->
<a href="" th:attr="title='前往百度',href='http://baidu.com'">前往百度</a>
<!--设置 href 属性-->
<a href="userList.html" th:attr="href=@{/user/userHome}">用户首页</a>
<!--设置 id 属性,data-schoolName 属性 Html 本身是没有的,但允许用户自定义 -->
<a href="#" th:attr="id='9527',data-schoolName='护龙山庄'">归海一刀</a>
</body>

在这里插入图片描述​

设置指定属性值

项目中通常使⽤ th:* 来特定的属性值,例如设置 value 属性,使⽤ th:value,设置 name 属性,则是 th:name 等等。

<body>
<!--设置 title 属性-->
<a href="http://baidu.com" th:title="百度">百度</a>
 
<!--设置 title、href 多个属性,注意:th:href 中的字符串因为有冒号、斜杠,所以要使用 单引号进行转义-->
<a href="" th:title='前往百度' th:href="'http://baidu.com'">前往百度</a>
 
<!--设置 href 属性-->
<a href="userList.html" th:href="@{/user/userHome}">用户首页</a>
 
<!--设置 id 属性,data-schoolName 属性 Html 本身是没有的,但允许用户自定义 -->
<a href="#" th:id="9525" th:data-schoolName="护龙山庄2号">归海一刀</a>
</body>

效果与上面 th:attr 完全一样。
HTML5 所有的属性,都可以使用 th:* 的形式进行设置值。

th:alt-title 和 th:lang-xmllang

th:alt-title 表示同时为 alt 属性与 title 属性赋值相同的值;th:lang-xmllang 表示同时为 lang 属性 xmllang 属性赋值相同的值。

注意:因为 alt 与 title 表达的意义基本相同,lang 与 xmllang 作用基本相同,所以 Thymeleaf 才为它们创建了这两个属性,对于其它的属性,则不能使用 “-” 进行操作。如 不能使用 th:href-title 来为 href 属性与 title 属性同时赋值相同的值。

< img src="…/…/images/gtvglogo.png" th:attr=“src=@{/images/gtvglogo.png},title=#{logo},alt=#{logo}” />
等价于
< img src="…/…/images/gtvglogo.png" th:src="@{/images/gtvglogo.png}" th:title="#{logo}" th:alt="#{logo}" />
等价于
< img src="…/…/images/gtvglogo.png" th:src="@{/images/gtvglogo.png}" th:alt-title="#{logo}" />

<body>
<a href="#" th:alt-title="'th:A-B'">th:A-B</a>
<a href="#" th:href-title="'th:A-B'">错误示范</a>
</body>

固定值布尔属性

HTML 具有布尔属性的概念,这个布尔属性没有值,并且⼀旦这个布尔属性存在则意味着属性值为 “true”。 但是在 XHTML中,这些属性只取⼀个值,这个属性值就是它本身。

例如,checked 属性:
< input type=“checkbox” name=“option1” checked />
< input type=“checkbox” name=“option21” checked=“checked” />

Thymeleaf 标准⽅⾔允许通过计算条件表达式的结果来设置这些属性的值,如果条件表达式结果为 true,则该属性将被设置为其固定值,如果结果为 false,则不会设置该属性。

<body>
<!--option1、option2 这是平时的写法,两个复选框都会选中-->
<input type="checkbox" name="option1" checked/><span>是否已婚1?</span>
<input type="checkbox" name="option2" checked="checked"/><span>是否已婚2?</span>
 
<!--后台控制器传递了一个:model.addAttribute("isMarry", true);-->
<!--option3、option4 会选中;option5 不会选中-->
<input type="checkbox" name="option3" th:checked="${isMarry}"/><span>是否已婚3?</span>
<input type="radio" name="option4" th:checked="${isMarry}"/><span>是否本科?</span>
<input type="radio" name="option5" th:checked="!${isMarry}"/><span>是否应届生?</span>
</body>

在这里插入图片描述
Thymeleaf 标准⽅⾔还⽀持以下固定值布尔属性:

th:asyncth:autofocusth:autoplay
th:checkedth:controlsth:declare
th:defaultth:deferth:disabled
th:formnovalidateth:hiddenth:ismap
th:loopth:multipleth:novalidate
th:nowrapth:openth:pubdate
th:readonlyth:requiredth:reversed
th:scopedth:seamlessth:selected

默认属性处理器

Thymeleaf 提供了⼀个默认属性处理器,允许设置任何属性的值,即使在标准⽅⾔中没有为其定义特定的 th:* 处理器,即使属性不是 html 的标准属性,如:

<body>
<!--输出:<p abc="9527">th:abc="9527"</p>-->
<p th:abc="9527">th:abc="9527"</p>
 
<!--输出:<p abc123="华安">th:abc123="华安"</p>-->
<p th:abc123="华安">th:abc123="华安"</p>
</body>
Linux命令行入门:从零掌握服务器运维与Shell脚本基础 在信息化时代,操作系统是数字世界的基石,而终端命令行则是高效驾驭服务器的核心技能。无论是软件部署、服务监控还是故障排查,掌握基于Shell的指令操作都能大幅提升工程效率。从最基础的文件目录管理、文本处理,到权限控制、进程监控与网络调试,命令行提供了一套强大且可自动化的操作范式。尤其对于运维工程师和开发者而言,理解管道、重定向以及脚本化任务,意味着将重复劳动转化为可复用的自动化流程。本文从环境准备讲起,系统梳理常用Linux命令的实际场景与输出验证,并延伸至Shell脚本编写与定时任务,帮助初学者快速建立从操 阅读详情

相关推荐

BUUCTF--[OGeek2019]babyrop

才学习了基本的ROP流程,到处找题练,不过也没做出来几道题,以这道32位的题作为例题吧。 这道题是BUUCTF上pwn练习题里的[OGeek2019]babyrop。 代码审计 老规矩先checksec一下: 没有canary保护,nx保护开启排除shellcode可能性,FULL RELEO为地址随机化。 观察主函数,先设定了一个闹铃,到时间就会强制退出程序,解除闹铃的方法在上一篇博客中提到过了, 这道题中闹铃函数依然对我们解题起不到什么干扰作用。 主函数的思路大概是:生成一个随机数,把这个随机数作为

N1rvana的博客 6009

Thymeleaf大全

记录一下项目中使用到的thymeleaf语法,以便日后查看

xl132598798的博客 642

一人公司 CEO × Accio Work:最大能效实战指南

作为一人公司 CEO,你需要同时扮演市场、销售、运营、财务、产品等多个角色。Accio Work 本质上就是你的。

华盛AI的博客 2103

Thymeleaf语法

Thymeleaf是Web和独立环境的现代服务器端Java模板引擎,能够处理HTML,XML,JavaScript,CSS甚至纯文本。 Thymeleaf的主要目标是提供一种优雅和高度可维护的创建模板的方式。为了实现这一点,它建立在自然模板的概念上,将其逻辑注入到模板文件中,不会影响模板被用作设计原型。这改善了设计的沟通,弥补了设计和开发团队之间的差距。 Thymeleaf也从一开始就设计了Web...

zuo_zuo_blog的博客 605

基于stm32开发的红外循迹小车

2.L298N电机驱动模块:分别是5V,12V,GND,可以通过外加电源给驱动模块供电,IN1,IN2,IN3,IN4,EN1,EN2,通过给IN口不同的电平,可以达到控制电机正反转,EN口为使能口,可以通过给EN口不同的PWM波,来达到控制小车速度,1.红外循迹模块:检测黑线的原理是向外发射红外线,当没有遇到黑线的时候,返回回来,之后返回高电平,当遇到黑线的时候,红外被吸收,返回高电平,读取相应IO口的电平就可以知道小车此时的大致位置;模块有四个输入接口,分别连接四个TT马达,驱动小车运动;

2301_81374681的博客 1万+

ISO26262 功能安全各个阶段测试要求

1. 开发过程说明 系统层面:包括软硬件集成测试、系统集成测试以及整车测试。 硬件层面:包括硬件集成与测试。 软件层面:单元测试、集成测试。 2. 功能安全总体要求 2.1 各项指标 2.2 诊断覆盖度举例 针对一个信号举例说明: 3. 功能安全测试要求 3.1 测试计划 核心内容应包括, 测试对象:需要测试的对象描述,以及测试的范围描...

AgingMoon的博客 1万+

thymeleaf中th:attr

thymeleaf中th:attr

weixin_55034383的博客 1961

腾讯云服务器被攻击,带宽被占满的抗战日记

故事 时间:2021-08-23 地点:腾讯云服务器 事件:服务器内容被黑,修复后某人气不过,开始DDOS,占满服务器的带宽,导致网站访问非常缓慢。 杂记 根据腾讯云后台+宝塔后台,带宽被占满:(小垃圾水管没办法) 部分参考:记一次阿里云服务器ECS流出带宽占满的解决过程 https://blog.youkuaiyun.com/wangzhihao1994/article/details/99563456 首先是在云主机上使用远程连接访问到云主机,安装iftop工具 CentOS .

Rudon滨海渔村的博客 1304

thymeleaf中th:attr用法

thymeleaf中th:attr用法 到好几个人问关于th:attr使用报错,不支持里面存在 ‘’ 的问题。还有属性值获取拼接的问题。 刚好现在有点时间,顺便写一下我自己对th:attr的理解吧。 首先,th:attr可以设置多个属性值,可以将属性值写死,当然也可以获取。 其次,里面配合‘|‘使用可以实现属性值拼接等问题。 废话不多说了,还是来几个示例吧! 1、写死的单个属性值添加 th:attr="class=btn" 2、写死的多个属性值添加 th:attr="class=btn,title=link

kevinchen1985的博客 1876

车载面试题目(ADAS)

多数功能都是依靠的前置传感器(经过Lidar、Radar、Camera融合),比如ACC、AEB、LKA、NOA、TJA、FCW等,只有少数涉及周视传感器,比如BSD、CVW、DOW。③如果前面有车切速度小于自车车速,自车减速对减速度有要求,比如3.5m/m2,④如果前车静止了,自车有个跟停距离要求,比如2-3m。试验场有不同曲率的弯道,比如125m、250m、500m的,根据需求跟车行驶,看是否会减速,能不能驶出弯道等。迭代内容:底层通讯、网络管理、诊断、刷写、信息安全、OTA。

qq_43475097的博客 2298

基于若依的ruoyi-nbcio-plus支持VForm3表单字段数据保存到数据库的一种方法——全网首创(一)

基于若依的ruoyi-nbcio-plus支持VForm3表单字段数据保存到数据库的一种方法——全网首创(一)

宁波阿成的博客 662

thymeleaf 语法——th:text默认值、字符串连接、th:attr、th:href 传参、th:include传参、th:inline 内联、th:each循环、th:with、th:if

文章目录th:attr 的使用th:href URL链接中传参th:insert 、th:replace、th:include 代码片段引入时传参th:inline 内联th:inline="text" 文本内联th:inline="javascript" 脚本内联th:inline="none" 禁止内联 th:attr 的使用 th:attr 的用处就是把数据以属性值的保存起来。 多...

猎人在吃肉 3万+

RK3568项目(四)--uboot启动流程之启动模式选择

本章接着上面,接着来分析uboot启动流程,设计vendor、按键、驱动模式的选择等

文艺小少年的博客 584

3)Thymeleaf th:* 设置/修改属性值详解

目录 属性汇总 th:text 与th:utext th:attr 设置任意属性值 设置指定属性值 th:alt-title 和 th:lang-xmllang 固定值布尔属性 默认属性处理器 属性汇总 <html xmlns:th="http://www.thymeleaf.org"> 编号 属性 描述 示例 1 th:text ...

蚩尤后裔-汪茂雄 2万+

华为的C语言编程规范.pdf

华为技术有限公司内部技术规范。本规范制定了编写C语言程序的基本原则、规则和建议。从代码的清晰、简洁、可测试、安全、程序效率、可移植各个方面对C语言编程作出了具体指导。

RU DOS版、EFI版32bit/64bit BIOS常用工具

DOS版、EFI版的RU工具,可用来查看IO、MEM、PCI、SMBIOS等资源。亲测在EFI SHELL下可用。

可能是最全的Thymeleaf参考手册(五):设置属性值

本文将说明在Thymeleaf中,如何在标记中设置、或修改属性值的方法。 设置任何属性的值 假设有以下模板代码: <form action="subscribe.html"> <fieldset> <input type="text" name="email" /> <input type="submit" value="Subscribe!" /> </fieldset> </form&g...

银河架构师的博客 1183

jdk-8u144-linux-x64.tar.gz.

该资源为搭建Linux系统Java环境用,资源的后缀为tar.gz格式的压缩包

Thymeleaf常用的th标签属性

标签属性 功能描述 示例 th:id 替换id <input th:id="'xxx' + ${collect.id}"/> th:text 文本替换 <p th:text="${collect.description}">description</p> th:utext 支持html的文本替换 <p th:utext="${htmlcontent}">content</p> th:object 替换对象 <div...

梦里逆天的博客 6695

温度PID控制PLC程序

温度PID稳定控制程序,适用于欧姆龙PLC,对其他PLC也具有很大参考价值

xml 属性value换行显示_Thymeleaf参考手册(五):设置属性值

本文将说明在Thymeleaf中,如何在标记中设置、或修改属性值的方法。设置任何属性的值假设有以下模板代码:<form action="subscribe.html"> <fieldset> <input type="text" name="email" /> <input type="submit" value="Subscribe!...

weixin_42384735的博客 376

fieldset 在td中怎样设置高度_Thymeleaf参考手册(五):设置属性值

本文将说明在Thymeleaf中,如何在标记中设置、或修改属性值的方法。设置任何属性的值假设有以下模板代码:<与Thymeleaf一样,此模板更像是静态原型,而不是Web应用程序的模板。首先,表单中的 action 属性静态链接到模板文件本身,因此没有地方进行有用的URL重写。其次,提交按钮中的 value 属性的值以英语文本显示,但我们希望将其国际化。输入 th:attr 属性,引入其更改...

weixin_39669133的博客 344

Thymeleaf3语法详解

一、th属性 常用th属性解读 html有的属性,Thymeleaf基本都有,而常用的属性大概有七八个。其中th属性执行的优先级从1~8,数字越低优先级越高。 一、th:text:设置当前元素的文本内容,相同功能的还有th:utext,两者的区别在于前者不会转义html标签,后者会。优先级不高:order=7 二、th:value:设置当前元素的value值,类似修改指定属性的还有th:...

liinux-Talk is cheap,show me the code. 1328

th:标签

https://blog.youkuaiyun.com/xxb5502296/article/details/78319898(挺全的) https://blog.youkuaiyun.com/qq_43279637/article/details/86406836 http://www.cnblogs.com/vinphy/p/4674247.html https://blog.youkuaiyun.com/qwlzxx/...

weixin_34219944的博客 984

【精品】Thymeleaf 语法基础

引入 Thymeleaf 修改 html 标签用于引入 thymeleaf 引擎,这样才可以在其他标签里使用 th:* 语法,这是下面语法的前提。 <html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"> 常用标签 语法 说明 {home.welcome} 使用国际化文本,国际化传参直接追加 (value…) ${user.name} 使用会话属性 @{} 表达式中使用

哈 2295

SpringBoot Web开发:详解员工信息修改回显功能实现与避坑指南

在Web应用开发中,表单数据绑定与回显是连接用户界面与后端数据模型的核心技术。其原理在于,当用户请求编辑某条记录时,后端根据唯一标识(如ID)查询出完整数据对象,并通过模型(Model)传递给视图层,由模板引擎将对象属性值安全、准确地填充到对应的表单控件中。这项技术的价值在于,它极大地提升了用户体验和操作效率,避免了用户重复输入,是构建交互友好型管理后台的基石。其应用场景广泛覆盖了各类数据管理功能,如用户信息维护、商品编辑、订单处理等。本文聚焦于Java Web开发中经典的“员工信息修改”场景,深入剖析如何

weixin_30915951的博客 469

SpringBoot整合Thymeleaf

Thymeleaf 是一款现代化的服务器端 Java 模板引擎,主要用于 Web 开发中渲染 HTML 页面,能够无缝集成 Spring Boot 框架。支持 HTML 原生语法,模板文件可直接在浏览器中打开预览(无后端数据时显示默认值);与 Spring 生态深度整合,是 Spring Boot 推荐的模板引擎;支持多种表达式、条件判断、循环遍历等动态渲染能力;无静态标签库,语法简洁易懂。

2503_92804185的博客 456

Thymeleaf实战指南:从零构建动态Web页面

本文是一份Thymeleaf实战指南,详细介绍了如何从零开始使用这一现代Java模板引擎构建动态Web页面。内容涵盖环境搭建、核心语法深度解析(如变量表达式、循环遍历、条件判断),并通过一个完整的用户管理系统案例展示其动静结合、与Spring Boot无缝集成的优势,帮助开发者平滑过渡并高效开发。

ol789012345的博客 827

Java基础总结之Thymeleaf详解

一、Thymeleaf语法 1.1 变量表达式${…} 1.2 选择变量表达式*{…} 1.3 消息表达式 #{…} 1.4 链接表达式 @{…} 1.5 片段表达式 ~{…} 二、基本使用 2.1 Thymeleaf模板基本配置 一、Thymeleaf语法 标签 在HTML页面上使用Thymeleaf标签,Thymeleaf 标签能够动态地替换掉静态内容,使页面动态展示。为了大家更直观的认识Thymeleaf,下面展示一个在HTML文件中嵌入了Thymeleaf的页面

ITSM/ITIL/网络安全/IT运维 2890

Thymeleaf标准表达式

Thymeleaf的官网为: http://www.thymeleaf.org/ 一、变量表达式${…} 使用${…}括起来的表达式,称为变量表达式。该表达式的内容会显示在HTML标签体文本处。 该表达式一般都是通过th:text标签属性进行展示的 处理器类 修改index页面 二、选择表达式*{…} 选择表达式,也称为星号表达式,其是使用*{…}括起来的表达式。一般用于...

kevin 2209
上一篇: Thymeleaf 标准表达式语法详解
下一篇: Thymeleaf th:each 循环迭代与 th:if、th:switch 条件判断
yyangqqian
博客等级 码龄15年 406粉丝 406原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值