Thymeleaf 常用的 th 属性

铮崽困了

于 2023-05-11 12:24:15 发布

阅读量1.9k

点赞数 3

分类专栏： Thymeleaf 文章标签： java servlet html

本文链接：https://blog.csdn.net/qq_71695227/article/details/130619162

版权

Thymeleaf 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

Thymeleaf 常用的八大属性

什么是Thymeleaf？

Thymeleaf 官网是这么解释的：Thymeleaf is a modern server-side Java template engine for both web and standalone environments.
译过来就是：Thymeleaf是适用于Web和独立环境的现代服务器端Java模板引擎

模板引擎介绍

模板引擎？你可能第一次听说模板引擎，估计你会禁不住想问：什么是模板引擎？

模板引擎（这里特指用于Web开发的模板引擎）是为了使用户界面与业务数据（内容）分离而产生的，它可以生成特定格式的文档，用于网站的模板引擎就会生成一个标准的html文档。从字面上理解模板引擎，最重要的就是模板二字，这个意思就是做好一个模板后套入对应位置的数据，最终以html的格式展示出来，这就是模板引擎的作用。
对于模板引擎的理解，可以这样形象的做一个类比：开会！相信你在上学初高中时候每次开会都要提前布置场地、拿小板凳、收拾场地。而你上了大学之后每次开会再也不去大操场了,每次开会都去学校的大会议室，桌子板凳音响主席台齐全，来个人即可，还可复用……。模板引擎的功能就类似我们的会议室开会一样开箱即用，将模板设计好之后直接填充数据即可而不需要重新设计整个页面。提高页面、代码的复用性。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ESqBQugq-1683778726809)

不仅如此，在Java中模板引擎还有很多，模板引擎是动态网页发展进步的产物，在最初并且流传度最广的jsp它就是一个模板引擎。jsp是官方标准的模板，但是由于jsp的缺点比较多也挺严重的，所以很多人弃用jsp选用第三方的模板引擎，市面上开源的第三方的模板引擎也比较多，有Thymeleaf、FreeMaker、Velocity等模板引擎受众较广。

Thymeleaf介绍

上面知晓了模板引擎的概念和功能，你也知道Thymeleaf是众多模板引擎的一种，你一定会好奇想深入学习Thymeleaf的方方面面。从官方的介绍来看，Thymeleaf的目标很明确：

Thymeleaf的主要目标是为您的开发工作流程带来优雅自然的模板-HTML可以在浏览器中正确显示，也可以作为静态原型工作，从而可以在开发团队中加强协作。
Thymeleaf拥有适用于Spring Framework的模块，与您喜欢的工具的大量集成以及插入您自己的功能的能力，对于现代HTML5 JVM Web开发而言，Thymeleaf是理想的选择——尽管它还有很多工作要做。

并且随着市场使用的验证Thymeleaf也达到的它的目标和大家对他的期望，在实际开发有着广泛的应用。Thymeleaf作为被Springboot官方推荐的模板引擎，一定有很多过人和不寻同之处：

动静分离： Thymeleaf选用html作为模板页，这是任何一款其他模板引擎做不到的！Thymeleaf使用html通过一些特定标签语法代表其含义，但并未破坏html结构，即使无网络、不通过后端渲染也能在浏览器成功打开，大大方便界面的测试和修改。
开箱即用： Thymeleaf提供标准和Spring标准两种方言，可以直接套用模板实现JSTL、 OGNL表达式效果，避免每天套模板、改JSTL、改标签的困扰。同时开发人员也可以扩展和创建自定义的方言。
Springboot官方大力推荐和支持，Springboot官方做了很多默认配置，开发者只需编写对应html即可，大大减轻了上手难度和配置复杂度。

此外，Thymeleaf在曾经还有一次大的版本升级，从Thymeleaf2.0—>Thymeleaf3.0。在Thymeleaf2.0时代，Thymeleaf基于xml实现，虽然它带来了许多出色强大的功能，但有时会降低性能效率，那个时候Thymeleaf的性能真的太差而被很多人所吐槽带来了很不好的印象。

但是Thymeleaf3.0对比Thymeleaf2.0有着翻天覆地的变化，几乎是全部重写了整个Thymeleaf引擎，在性能、效率上相比Thymeleaf2有了很大改善，能够满足更多项目的需求，且Thymeleaf3.0不再基于xml所以在html环境下有着更宽松的编程环境。

此外，Thymelaf3.0在方言、独立于Java Servlet API、重构核心API、片段表达等方面有着巨大提升和改善，具体可以参看Thymeleaf3十分钟参考指南。

th 属性

html有的属性，Thymeleaf基本都有，而常用的属性大概有七八个。其中th属性执行的优先级从1~8，数字越低优先级越高。


th:text ：设置当前元素的文本内容，相同功能的还有th:utext，两者的区别在于前者不会转义html标签，后者会。优先级不高：order=7


th:value：设置当前元素的value值，类似修改指定属性的还有th:src，th:href。优先级不高：order=6


th:each：遍历循环元素，和th:text或th:value一起使用。注意该属性修饰的标签位置，详细往后看。优先级很高：order=2


th:if：条件判断，类似的还有th:unless，th:switch，th:case。优先级较高：order=3


th:insert：代码块引入，类似的还有th:replace，th:include，三者的区别较大，若使用不恰当会破坏html结构，常用于公共代码块提取的场景。优先级最高：order=1


th:fragment：定义代码块，方便被th:insert引用。优先级最低：order=8


th:object：声明变量，一般和*{}一起配合使用，达到偷懒的效果。优先级一般：order=4


th:attr：修改任意属性，实际开发中用的较少，因为有丰富的其他th属性帮忙，类似的还有th:attrappend，th:attrprepend。优先级一般：order=5

th:text

<span th:text="${session.user.userName}"></span>

th:value

<input th:value="${session.user.userName}" >

th:each

java

// List集合作成
List<String> list = new ArrayList<>();
    list.add("admin");
    list.add("role");
    list.add("age");
    model1.addObject("list", list);

    // Map集合作成
    Map<String, String> map = new HashMap<>();
    map.put("key1", "value1");
    map.put("key2", "value2");
    map.put("key3", "value3");
    model1.addObject("map", map);
    return model1;
}

html

<div th:each="temp,status : ${list}">
    <span th:text="${status.index}"></span>
    <span th:text="${status.count}"></span>
    <span th:text="${status.size}"></span>
    <span th:text="${status.current}"></span>
    <span th:text="${status.even}"></span>
    <span th:text="${status.odd}"></span>
    <span th:text="${status.first}"></span>
    <span th:text="${status.last}"></span>
    <span th:text="${temp}"></span>
</div>

在这里插入图片描述

th:if

<a class="navbar-brand" href="#">
    欢迎
    <span th:if="${session.user.userType eq 1}">讲师</span>
    <span th:if="${session.user.userType eq 2}">学生</span>
    <span th:if="${session.user.userType eq 2}">
        <span th:if="${session.user.userClassid eq 1}">2206java :</span>
        <span th:if="${session.user.userClassid eq 2}">2208java :</span>
        <span th:if="${session.user.userClassid eq 3}">2210java :</span>
    </span>
    <span th:if="${session.user.userType eq 1}">
        <span th:text="${session.user.userName.substring(0,1)}"></span>
        老师
    </span>
    <span th:if="${session.user.userType eq 2}">
        <span th:text="${session.user.userName.substring(0,1)}"></span>
        同学
    </span>
</a>

gt：great than（大于）>
ge：great equal（大于等于）>=
eq：equal（等于）==
lt：less than（小于）<
le：less equal（小于等于）<=
ne：not equal（不等于）!=

th:insert/th:fragment

引入子模块的所有，保留自己的主标签
当引入子页面的片段的时候，会保留 th:fragment片段的主标签

准备工作

aaa.html 页面 (父页面)

:: html表示引入整个子页面，包括子页面中的js和css

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            .parent {
                width: 500px;
                height: 100px;
                background-color: yellow;
            }
        </style>
    </head>
    <body>
        <div class="parent">
            我是父页面中的内容
        </div>
        <hr>

        <div class="parent-area">
            <!-- 👉👉👉在此处引入子页面👈👈👈 -->
            <div id="import-content" th:insert="test/bbb :: html(id='110', name='铮崽困了')"></div>

        </div>
    </body>
</html>

在父页面引用整个子页面同时给子页面传值 id = 110 name=‘铮崽困了’

bbb.html 页面 (子页面)

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            .children {
                width: 500px;
                height: 500px;
                background-color: pink;
            }
        </style>
    </head>
    <body>
        <div class="children">
            <div th:id="${id}">[[${name}]]</div>
            <h1>我是子页面中的内容</h1>
            <hr>

            <div th:fragment="footer">
                我是子页面中footer片段的内容
            </div>
        </div>
    </body>
    <script>

    </script>
</html>

子页面取值: ${id} = 110 [[$ {name}]] = 铮崽困了

效果

在这里插入图片描述

引入片段

可以看到th:fragment片段的主标签div依旧存在

在这里插入图片描述

th:object

th:object表示替换对象，在一个标签里使用th:object="xxx"时，可以在其子标签里使用*{…}来获取xxx里面的属性。

<div th:object="${session.user}"> <!-- 给这个div标签选定一个object:user-->
<!-- 使用*{...}可以选取user的某个属性-->
	<p>Name: <span th:text="*{firstName}">Sebastian</span>.</p> 
	<p>Surname: <span th:text="*{lastName}">Pepper</span>.</p>
	<p>Nationality: <span th:text="*{nationality}">Saturn</span>.</p> 
 </div>

但如果没有th:object时，*{}作用就相当于${}:

<div> 
	 <p>Name: <span th:text="*{session.user.name}">Sebastian</span>.</p>
	 <p>Surname: <span th:text="${session.user.surname}">Pepper</span>.</p> 
 	 <p>Nationality: <span th:text="*{session.user.nationality}">Saturn</span>.</p> 
</div>

变量表达式不仅可以写成${…}，还可以写成*{…}。但有一个重要的区别：星号语法计算选定对象上的表达式，而不是对整个上下文。也就是说，只要没有选定的对象，美元和星号的语法就完全相同

th:attr

首先，th:attr可以设置多个属性值，可以将属性值写死，当然也可以获取。

其次，里面配合‘|‘使用可以实现属性值拼接等问题。

1、写死的单个属性值添加
th:attr=“class=btn”
2、写死的多个属性值添加
th:attr=“class=btn,title=link”
3、当一个属性的值较多的时候可以用 |
th:attr=“class=|btn btn-group|”
4、属性值动态赋值
th:attr=“value=#{obj.value},title=#{obj.title}”
5、动态拼接属性值
th:attr=“value=select_val|#{obj.val}|”
6、属性值中有引号的情况
th:attr=“data-am-collapse=|{target:‘#collapse-nav5’}|”

实例

<div class="top-3 addr-item" th:each="addr:${orderConfirmData.address}">
    <p th:attr="def=${addr.defaultStatus},addrId=${addr.id}">[[${addr.name}]]</p><span>[[${addr.name}]]  [[${addr.province}]]  [[${addr.detailAddress}]]  [[${addr.phone}]]</span>
</div>

//底下这句话取到p标签里面 def属性 = ‘1’ 的一项，并为其加上特定的css样式
$(".addr-item p[def='1']").css({"border":"2px solid red"})  
tr="def=${addr.defaultStatus},addrId=${addr.id}">[[${addr.name}]]</p><span>[[${addr.name}]]  [[${addr.province}]]  [[${addr.detailAddress}]]  [[${addr.phone}]]</span>
</div>

//底下这句话取到p标签里面 def属性 = ‘1’ 的一项，并为其加上特定的css样式
$(".addr-item p[def='1']").css({"border":"2px solid red"})

铮崽困了

关注

3
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Thymeleaf 常用的 th 属性

html有的属性，Thymeleaf基本都有，而常用的属性大概有七八个。其中th属性执行的优先级从1~8，数字越低优先级越高。th:text , th:value , th:each , th:if , th:insert , th:fragment , th:object , th:attr
复制链接

扫一扫