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 | 计算其值表达式并将结果设置为标签的标签体 | <p th:text="${userName}">中国</p>,值为 null 为空时,整个标签不显示任何内容。 |
2 | th:utext | th:text 会对结果中的特殊字符转义,th:utext 不会转义 | <p th:utext="${userInfo}">中国</p>,值为 null 为空时,整个标签不显示任何内容。 |
3 | th:attr | 为标签中的任意属性设置,可以一次设置多个属性 | <a href="" th:attr="title='前往百度',href='http://baidu.com'">前往百度</a> |
4 | th:* | 为 html 指定的属性设值,一次设置一个 | <a href="" th:title='前往百度' th:href="'http://baidu.com'">前往百度</a> |
5 | th:alt-title | 同时为 alt 与 title 属性赋值 | <a href="#" th:alt-title="'th:A-B'">th:A-B</a> |
6 | th:lang-xmllang | 同时为 lang 、xmllang 属性赋值 | <head lang="en" th:lang-xmllang="en"> |
7 | th:fragment | 定义模板片段 | <div th:fragment="copy"> |
8 | th:insert | 将被引用的模板片段插⼊到自己的标签体中 | <div th:insert="~{footer :: copy}"></div> |
9 | th:replace | 将被引用的模板片段替换掉自己 | <div th:replace="footer :: copy"></div> |
10 | th:include | 类似于 th:insert,⽽不是插⼊⽚段,它只插⼊此⽚段的内容 |
<div th:include="footer :: copy"></div> |
11 | th:remove | 删除模板中的某些代码片段 | <tr th:remove="all">... |
12 | th:each | 迭代数据,如 数组、List、Map 等 | <tr th:each="user : ${userList}">... |
13 | th:if | 条件为 true 时,显示模板⽚段,否则不显示 |
<p th:if="${isMarry}">已婚1</p> |
14 |
th:unless |
条件为 false 时,显示模板⽚段,否则不显示 |
<p th:unless="!${isMarry}">已婚2</p> |
15 |
th:switch |
与 Java 中的 switch 语句等效,有条件地显示匹配的内容 | <div th:switch="1"> |
16 | th:case | 配合 th:switch 使用 |
<div th:switch="1"> <p th:case="0">管理员</p> <p th:case="1">操作员</p> <p th:case="*">未知用户</p> </div> |
17 | th:with | 定义局部变量 | <div th:with="userFirst=${userList[0]}"> |
18 |
th:inline |
禁用内联表达式,内联js,内联css | <script type="text/javascript" th:inline="javascript"> |
th:text 与 th:utext
1) th:text 属性用于计算其值表达式并将结果设置为标签的标签体。举例如下:
--------------------------控制器------------------------@GetMapping("userHome")public String userHome(Model model) {logger.info("用户即将进入 hoem.html 页面.");/**浏览器访问后,返回数据给页面*/model.addAttribute("userName", "华安");return "user/home";}
-------------------------home.html-----------------------
<body>
<p th:text="5+9">China</p>
<p th:text="我爱中国">China</p>
<!--$符获取后台传来的值,th:text 将值替换标签体的内容-->
<p th:text="${userName}">中国</p>
</body>
页面效果如下:
2)th:utext
th:text 属性对表达式中结果中的特殊字符默认会进行转义处理,如 “<b>China</b>,USA,UK” 会被转义成 “<b>China</b>,USA,UK”
th:utext 属性 (unescaped text) 则不会对结果进行转义
-------------------控制器------------------@GetMapping("userHome")public String userHome(Model model) {logger.info("用户即将进入 hoem.html 页面.");/**浏览器访问后,返回数据给页面*/model.addAttribute("china", "<b>Chian</b>,USA,UK");return "user/home";}
-------------------home.html---------------
<body>
<p>Welcome to our <b>fantastic</b> grocery store!</p>
<!--th:text 会对结果中的特殊字符进行转义,如 < 转成 < 将 > 转成 >-->
<p th:text="${china}">默认转义</p>
<!--th:utext 不会结果进行转义-->
<p th:utext="${china}">不会转义</p>
</body>
效果如下:
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 /> <!-- HTML-->
<input type="checkbox" name="option21" checked="checked" /> <!-- XHTML -->
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:async | th:autofocus | th:autoplay |
th:checked | th:controls | th:declare |
th:default | th:defer | th:disabled |
th:formnovalidate | th:hidden | th:ismap |
th:loop | th:multiple | th:novalidate |
th:nowrap | th:open | th:pubdate |
th:readonly | th:required | th:reversed |
th:scoped | th:seamless | th: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>
3)Thymeleaf th:* 设置/修改属性值详解相关推荐
- Thymeleaf th:* 设置/修改属性值详解
文章目录 属性汇总 th:text 与 th:utext th:attr 设置任意属性值 设置指定属性值 th:alt-title 和 th:lang-xmllang 固定值布尔属性 默认属性处理器 ...
- Python|线程和进程|阻塞|非阻塞|同步|异步|生成器和协程|资源竞争|进程间通信|aiohttp库|daemon属性值详解|语言基础50课:学习(11)
文章目录 系列目录 原项目地址 第34课:Python中的并发编程-1 线程和进程 多线程编程 使用 Thread 类创建线程对象 继承 Thread 类自定义线程 使用线程池 守护线程 资源竞争 G ...
- java反射设置属性值_Java反射如何有效的修改final属性值详解
前言 以前写过一篇 Java 反射修改 final 属性值,本文将在这里重新温习一下Java反射如何有效的修改final属性值,下面话不多说了,来一起看看详细的介绍: 假设有个类 class Pers ...
- fianl属性 java_Java反射如何有效的修改final属性值详解
前言 以前写过一篇 Java 反射修改 final 属性值,本文将在这里重新温习一下Java反射如何有效的修改final属性值,下面话不多说了,来一起看看详细的介绍: 假设有个类 class Pers ...
- php property 获取,JavaScript中如何获取和设置property属性代码详解
JavaScript中对象的property有三个属性: 1.writable.该property是否可写. 2.enumerable.当使用for/in语句时,该property是否会被枚举. 3. ...
- Steam道具属性值详解
Steam中道具的属性有时候令人费解,一个特定的道具有几种不同类型的ID,以及许多模糊的专有名词.本指南旨在为您解决这些问题. 首先声明,Steam道具的"官方"含义是asset. ...
- jQuery获取、设置标签属性值
jQuery获取.设置标签属性值 jQuery提供了两种方法: attr():传入一个参数获取某属性值,两个参数:修改某属性值,返回参数的值(不推荐操作checked.readOnly.selecte ...
- 微信小程序.setData 设置对象属性值,不改变对象整体属性
.setData 设置对象属性值 步骤一:data初始化数据 userInfo: { nickName:'昵称', avatarUrl:'https://c-ssl.duitang.com/tx.pn ...
- CSS clear 属性取值详解
之前有整理过一部分知识点, 一直没有发布, 因为都是有关 前端 方面的零散内容; 现在想想无论分享什么内容都需要慢慢积累, 所以还是决定将之前整理的相关内容验证之后慢慢分享给大家 这个专题 就是 工作 ...
- js基础总结——js 获取元素节点、js 绑定onclick事件、js 获取属性 修改属性值、js 获取子元素、js 改变css样式
参考书籍:<JavaScript DOM编程艺术 第2版> 本博客代码的测试页面是:https://www.layui.com/ js dom操作 js 获取元素节点 一份document ...
最新文章
- python好找工作吗2017-2017,再来聊一聊Python,未来发展怎样?
- 【教程】怎么同时同时ping1000个IP地址?
- boost::edge_list用法的测试程序
- ARM的流水线与PC值的关系
- Linux运维学习大纲
- 李沐分享斯坦福2021秋季新课:实用机器学习
- wamp的卸载、安装与配置apache配置伪静态
- Python精确指南——第三章 Selenium和爬虫
- 程序员遇到问题的解决之道
- Spring Boot官宣:正式弃用 Java 8,最低要求 Java 17!怎么办?
- 软件开发必备英语汇总(持续更新)
- python外部库matlab_python调用MATLAB库绘制直方图
- 2021年PMP考试模拟题4(含答案解析)
- JAVA作业 随机抽取
- 在直流电源(Vcc)和地之间并接电容的作用
- linux中文件夹的作用
- Eclipes下载安装
- 头插法建立单链表 c
- 读书笔记:《流畅的Python》第21章 类元编程
- smartq ten3 android4,SmartDevices智器SmartQ Ten3平板电脑Android 4.1固件
热门文章
- PDA程序 点击登录按钮显示提示信息
- 关于性格内向者的10个误解,献给奋战在一线的程序员
- 高中python公开课怎么上好_Python公开课 - Requests高级功能
- 拓端tecdat:R语言贝叶斯广义线性混合效应(多层次/水平/嵌套)模型GLMM、逻辑回归分析教育留级影响因素数据
- 拓端tecdat:R语言因子实验设计nlme拟合非线性混合模型分析有机农业施氮水平
- 拓端tecdat|R语言有状态依赖强度的非线性、多变量跳跃扩散过程模型似然推断分析股票价格波动
- 拓端tecdat|R语言神经网络模型预测车辆数量时间序列
- pytorch RuntimeError: expected scalar type Double but found Float
- 关于日期 显示当前日期
- java 按两个键_java – 使用调度程序按下多个键