Thymeleaf条件渲染与循环：掌握th:if、th:unless和th:each的高级用法

Thymeleaf条件渲染与循环：掌握th:if、th:unless和th:each的高级用法

【免费下载链接】thymeleafThymeleaf is a modern server-side Java template engine for both web and standalone environments.项目地址: https://gitcode.com/gh_mirrors/th/thymeleaf

Thymeleaf是一款现代的服务器端Java模板引擎，广泛应用于Web开发中。本文将详细介绍Thymeleaf中条件渲染（th:if、th:unless）和循环（th:each）的高级用法，帮助开发者轻松实现动态页面效果。

一、条件渲染：th:if与th:unless的终极指南

条件渲染是Web开发中常用的功能，Thymeleaf提供了th:if和th:unless两个属性来实现这一需求。

1.1 th:if：满足条件才显示

th:if属性用于指定一个条件，当条件为true时，所在的标签才会被渲染。例如：

<p th:if="${name.length() gt 10}"> 用户名过长，请使用更短的用户名 </p>

在上面的代码中，只有当name的长度大于10时，这个段落才会被显示。

1.2 th:unless：不满足条件才显示

th:unless与th:if相反，当条件为false时，所在的标签才会被渲染。例如：

<div class="seedstarterlist" th:unless="${#lists.isEmpty(allSeedStarters)}"> <h2 th:text="#{title.list}">List of Seed Starters</h2> <!-- 种子启动器列表内容 --> </div>

这个例子中，只有当allSeedStarters列表不为空时，才会显示种子启动器列表。

1.3 条件判断的高级用法

Thymeleaf提供了丰富的表达式来进行条件判断，例如：

• 使用#fields.hasErrors检查表单错误：

<ul th:if="${#fields.hasErrors('*')}" class="errorlist"> <li th:each="err : ${#fields.errors('*')}" th:text="${err}">Input is incorrect</li> </ul>

• 使用#lists.isEmpty检查列表是否为空：

<div th:unless="${#lists.isEmpty(allSeedStarters)}"> <!-- 列表不为空时显示的内容 --> </div>

二、循环遍历：th:each的强大功能

th:each属性用于遍历集合，生成重复的HTML元素。它是Thymeleaf中最常用的属性之一，功能强大且灵活。

2.1 基本遍历

最基本的遍历用法是直接遍历一个集合：

<tr th:each="sb : ${allSeedStarters}"> <td th:text="${{sb.datePlanted}}">13/01/2011</td> <td th:text="#{|bool.${sb.covered}|}">yes</td> <td th:text="#{|seedstarter.type.${sb.type}|}">Wireframe</td> </tr>

这个例子遍历allSeedStarters集合，为每个元素生成一个表格行。

2.2 遍历状态变量

在遍历过程中，Thymeleaf提供了一个状态变量，可以获取当前遍历的位置、索引等信息：

<tr th:each="row,rowStat : ${sb.rows}"> <td th:text="${rowStat.count}">1</td> <td th:text="${row.variety.name}">Thymus Thymi</td> <td th:text="${row.seedsPerCell}">12</td> </tr>

这里的rowStat就是状态变量，它包含以下属性：

• index：从0开始的索引
• count：从1开始的计数
• size：集合的大小
• current：当前元素
• even/odd：是否为偶数/奇数行
• first：是否为第一个元素
• last：是否为最后一个元素

2.3 遍历数组和Map

th:each不仅可以遍历集合，还可以遍历数组和Map：

<!-- 遍历数组 --> <li th:each="type : ${allTypes}" th:value="${type}" th:text="#{${'seedstarter.type.' + type}}">Wireframe</li> <!-- 遍历Map --> <li th:each="entry : ${userPreferences}"> <span th:text="${entry.key}">Key</span>: <span th:text="${entry.value}">Value</span> </li>

2.4 嵌套遍历

在实际开发中，我们经常需要处理嵌套的数据结构，这时候就需要使用嵌套的th:each：

<tr th:each="sb : ${allSeedStarters}"> <td th:text="${{sb.datePlanted}}">13/01/2011</td> <td th:text="#{|bool.${sb.covered}|}">yes</td> <td th:text="#{|seedstarter.type.${sb.type}|}">Wireframe</td> <td> <table> <tbody> <tr th:each="row,rowStat : ${sb.rows}"> <td th:text="${rowStat.count}">1</td> <td th:text="${row.variety.name}">Thymus Thymi</td> <td th:text="${row.seedsPerCell}">12</td> </tr> </tbody> </table> </td> </tr>

这个例子展示了如何遍历一个包含子列表的对象，生成嵌套的表格结构。

三、综合应用：构建动态表单

结合条件渲染和循环遍历，我们可以构建出功能强大的动态表单。例如：

<form action="#" th:action="@{/seedstartermng}" th:object="${seedStarter}" method="post"> <div> <label for="type" th:text="#{seedstarter.type}">Type</label> <select th:field="*{type}"> <option th:each="type : ${allTypes}" th:value="${type}" th:text="#{${'seedstarter.type.' + type}}">Wireframe</option> </select> </div> <div> <label th:text="#{seedstarter.features}">Features</label> <ul> <li th:each="feat : ${allFeatures}"> <input type="checkbox" th:field="*{features}" th:value="${feat}" /> <label th:for="${#ids.prev('features')}" th:text="#{${'seedstarter.feature.' + feat}}">Electric Heating</label> </li> </ul> </div> <div> <label th:text="#{seedstarter.rows}">Rows</label> <table> <tbody> <tr th:each="row,rowStat : *{rows}"> <td th:text="${rowStat.count}">1</td> <td> <select th:field="*{rows[__${rowStat.index}__].variety}"> <option th:each="var : ${allVarieties}" th:value="${var.id}" th:text="${var.name}">Thymus Thymi</option> </select> </td> <td> <input type="text" th:field="*{rows[__${rowStat.index}__].seedsPerCell}" th:errorclass="fieldError" /> </td> </tr> </tbody> </table> </div> </form>

这个表单示例展示了如何使用th:each动态生成下拉选项、复选框列表和动态表格行，以及如何结合th:field实现表单数据绑定。

四、实战技巧与最佳实践

4.1 使用th:remove处理不需要的元素

在开发过程中，我们经常需要在模板中保留一些示例代码，以便于前端开发，但在实际渲染时又不需要这些代码。这时可以使用th:remove属性：

<li th:remove="all"> <input id="removed1" type="checkbox" /> <label for="removed1">Turf</label> </li>

4.2 结合CSS实现交替行样式

利用th:each的状态变量，我们可以轻松实现表格的交替行样式：

<tr th:each="item, stat : ${items}" th:classappend="${stat.odd ? 'odd' : 'even'}"> <!-- 表格内容 --> </tr>

然后在CSS中定义.odd和.even类的样式即可。

4.3 处理空集合

在遍历集合之前，最好先检查集合是否为空，以避免不必要的渲染：

<div th:unless="${#lists.isEmpty(items)}"> <table> <tr th:each="item : ${items}"> <!-- 表格内容 --> </tr> </table> </div> <div th:if="${#lists.isEmpty(items)}"> <p>没有找到相关数据</p> </div>

五、总结

Thymeleaf的条件渲染（th:if、th:unless）和循环遍历（th:each）是构建动态Web页面的强大工具。掌握这些功能，可以让我们的模板更加灵活、简洁和易于维护。通过本文介绍的高级用法和最佳实践，相信你已经能够熟练运用这些功能来开发出更加专业的Thymeleaf模板。

无论是简单的条件判断，还是复杂的嵌套循环，Thymeleaf都提供了直观而强大的解决方案，让我们的Web开发工作变得更加高效和愉悦。

【免费下载链接】thymeleafThymeleaf is a modern server-side Java template engine for both web and standalone environments.项目地址: https://gitcode.com/gh_mirrors/th/thymeleaf