Thymeleaf简单语法

阿深不吃鱼

已于 2023-08-13 15:54:59 修改

阅读量96

点赞数

文章标签：前端 java

于 2023-08-13 11:14:45 首次发布

本文链接：https://blog.csdn.net/m0_63879480/article/details/132257486

版权

Thymealf大多为th指令，要想获取指令提示，需要在html标签中增加xmlns属性

Thymeleaf模版

模版如下

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
</body>
</html>

基础语法

核心用法

th:xxx：动态渲染制定的html标签属性值或者th指令（遍历、判断等）

th:text：标签内文本渲染，同时会转义html标签
th:utext: 标签内文本渲染，不会转义html标签

<span th:text="${name}"></span> 
<span th:utext="${name}"></span>

对比以上标签当请求域中变量name为"< span > 123 < /span"两者渲染结果的区别

th:属性：标签指定属性渲染

<a th:href="@{${session.logoutUrl}}">退出</a>

这是动态指定了这个超链接属性的值为session域中logoutUrl的值

th:attr：标签任意属性渲染

<img th:attr="src=${imgUrl},style=${style}">

th:attr可以批量动态处理属性,通过attr=value的方式

th:if th:each …其他th指令

<img th:src="${imgUrl}" th:if="${isShow}">

th:if条件判断语句，若请求域中变量isShow为true，则显示该图片，否则不显示

表达式：用来动态取值

${} : 变量取值，
@{} : url路径,@{}代表项目的根路径
#{} : 国际化消息
~{}: 片段引用
*{}:变量选择：配合th:object绑定对象

还有很多工具类和内置对象，详细参照Thymeleaf官方文档
下面简单举例一个字符串工具类，作用将字符串转换为大写

<span th:text="${#strings.toUpperCase(name)}"></span>

thymeleaf遍历

用th:each来实现遍历，同时遍历中有一变量iterStat代表遍历状态,他有以下属性

index：遍历元素索引，从0开始
count：遍历元素索引，从1开始
size：遍历集合中元素总数量
current：当前遍历元素对象
even/odd：是否偶数/奇数行
first/last：是否为首（末）元素

<tr th:each="user,iterStat :${users}">
    <td th:text="${iterStat.count}"></td>
    <td th:text="${user.id}"></td>
    <td th:text="${user.name}"></td>
    <td th:text="|${user.age}-${user.age>=18?'成年':'未成年'}|"></td>
    <td>[[${user.email}]]</td>
</tr>

注意，这里的email为Thymeleaf的行内写法,age中||为字符串拼接语法

条件判断

通常使用th:if标签，除此之外还有th:switch-th:case标签

<tr th:each="user,iterStat :${users}">
    <td th:text="${iterStat.count}"></td>
    <td th:text="${user.id}"></td>
    <td th:text="${user.name}"></td>
    <td th:text="${user.age}"></td>
    <td>[[${user.email}]]</td>
    <td th:switch="#{user.role}">
        <p th:case="'admin'">管理员</p>
        <p th:case="'user'">普通用户</p>
        <p th:case="*">[[${user.role}]]</p>
    </td>
    <td th:if="${#string.isEmpty(user.address)}" th:text="'无地址'">
    </td>
    <td th:if="${not #string.isEmpty(user.address)}" th:text="${user.address}">
    </td>
</tr>