当前位置：首页 > news >正文

Thymeleaf 流程控制与迭代详解

news 2025/7/17 6:48:49

关键词：Thymeleaf、流程控制、th:if、th:switch、th:each、迭代、状态对象、Spring Boot 模板引擎

✅ 引言

在使用 Thymeleaf 构建动态 HTML 页面时，流程控制 和迭代是两个非常核心的功能。Thymeleaf 提供了丰富的属性来支持条件判断（如 th:if、th:unless、th:switch）和循环遍历（如 th:each），可以让你根据后端数据动态渲染页面内容。

本文将围绕 Thymeleaf 的流程控制与迭代机制 进行系统讲解，并为每个小节提供完整的 HTML 页面 + Spring Boot 后端 Java 示例代码，帮助你掌握 Thymeleaf 在真实项目中的高级用法。

📌 一、条件判断：`th:if` 与 `th:unless`

1.1 `th:if`：条件为真时渲染

<p th:if="${user.isAdmin}">您是管理员</p>
<p th:if="${user.role == 'guest'}">您是访客</p>

Java 后端示例：

model.addAttribute("user", new User("张三", 28, "admin", true));

📌 输出结果（当 isAdmin == true）：

您是管理员

1.2 `th:unless`：条件为假时渲染

<p th:unless="${user.isAdmin}">您不是管理员</p>

📌 输出结果（当 isAdmin == false）：

您不是管理员

📌 二、多条件判断：`th:switch` 与 `th:case`

2.1 使用 `th:switch` 实现多分支判断

<div th:switch="${user.role}"><p th:case="'admin'">您是管理员</p><p th:case="'editor'">您是编辑人员</p><p th:case="*">未知角色</p>
</div>

📌 示例输出（当 user.role == "admin"）：

您是管理员

📌 示例输出（当 user.role == "guest"）：

未知角色

📌 三、循环遍历：`th:each` 详解

3.1 基本用法

<ul><li th:each="fruit : ${fruits}" th:text="${fruit}"></li>
</ul>

Java 后端示例：

model.addAttribute("fruits", Arrays.asList("苹果", "香蕉", "橙子"));

📌 输出 HTML：

<ul><li>苹果</li><li>香蕉</li><li>橙子</li>
</ul>

3.2 获取循环状态对象：`th:each` 状态变量

Thymeleaf 提供了一个内置的状态对象 stat，可用于获取索引、是否为第一个/最后一个元素等。

<ol><li th:each="fruit, stat : ${fruits}">第 <span th:text="${stat.index + 1}"></span> 个水果：<b th:text="${fruit}"></b><span th:if="${stat.odd}">(奇数位)</span><span th:if="${stat.even}">(偶数位)</span></li>
</ol>

📌 输出 HTML：

第 1 个水果：苹果（奇数位）
第 2 个水果：香蕉（偶数位）
第 3 个水果：橙子（奇数位）

📌 四、嵌套循环与多级数据结构处理

4.1 嵌套 `th:each` 遍历二维数据

Map<String, List<String>> categories = new HashMap<>();
categories.put("水果", Arrays.asList("苹果", "香蕉", "橙子"));
categories.put("蔬菜", Arrays.asList("西红柿", "黄瓜", "胡萝卜"));
model.addAttribute("categories", categories);

HTML 模板：

<div th:each="entry : ${categories}"><h3 th:text="${entry.key}"></h3><ul><li th:each="item : ${entry.value}" th:text="${item}"></li></ul>
</div>

📌 输出 HTML：

<h3>水果</h3>
<ul><li>苹果</li><li>香蕉</li><li>橙子</li>
</ul><h3>蔬菜</h3>
<ul><li>西红柿</li><li>黄瓜</li><li>胡萝卜</li>
</ul>

📌 五、结合条件判断与循环实现复杂逻辑

5.1 示例：遍历用户列表并根据角色高亮显示

List<User> users = Arrays.asList(new User("张三", 25, "admin", true),new User("李四", 28, "editor", false),new User("王五", 30, "guest", false)
);
model.addAttribute("users", users);

HTML 模板：

<table border="1"><tr th:each="user, stat : ${users}"th:class="${user.isAdmin}? 'admin-row' : (${stat.odd}? 'odd-row' : 'even-row')"><td th:text="${user.name}"></td><td th:text="${user.role}"></td></tr>
</table>

CSS 示例：

.admin-row { background-color: #ffeb3b; }
.odd-row { background-color: #f0f0f0; }
.even-row { background-color: #ffffff; }

📌 输出效果：

张三行高亮为黄色（管理员）
李四行为灰色（奇数）
王五行为白色（偶数）

📌 六、流程控制与迭代的注意事项

项目	说明
表达式语法	使用 `${}` 表示变量、`*{}` 表示对象内部字段
状态变量	`stat` 是自动提供的，可获取索引、奇偶、是否为第一个/最后一个
空值处理	使用 `th:if="${!#strings.isEmpty(name)}"` 避免空指针
逻辑运算	支持 `and`、`or`、`not`、`eq`、`neq`、`gt`、`lt` 等
性能优化	尽量避免在模板中进行复杂逻辑处理，交由后端处理

✅ 总结

功能	属性	用途
条件判断	`th:if`, `th:unless`	控制是否渲染某块内容
多条件判断	`th:switch`, `th:case`	多分支选择
循环遍历	`th:each`	遍历集合
状态对象	`stat`	获取索引、奇偶等信息
嵌套循环	多层 `th:each`	处理复杂结构数据
样式绑定	`th:class`	根据逻辑动态设置样式