Thymeleaf 条件表达式用法

1. Overview

In this tutorial, we will look at the different types of conditionals available in Thymeleaf.

For a quick introduction to Thymeleaf, please refer to this article.

2. Maven Dependencies

Let’s start with the Maven dependencies that are required to use Thymeleaf along with Spring:

<dependency>
    <groupId>org.thymeleaf</groupId>
    <artifactId>thymeleaf</artifactId>
    <version>3.1.2.RELEASE</version>
</dependency>
<dependency>
    <groupId>org.thymeleaf</groupId>
    <artifactId>thymeleaf-spring5</artifactId>
    <version>3.1.2.RELEASE</version>
</dependency>

We should use the matching thymeleaf-springX library for other Spring releases, where X stands for the Spring version. Please also note that Spring 5 is supported by Thymeleaf, starting with 3.0.8.RELEASE.

The latest versions of the required dependencies can be found here.

3. Thymeleaf Conditionals

We have to distinguish between conditionals that allow us to render text within an HTML element depending on a condition and those that control the instantiation of an HTML element itself.

Let’s define our Teacher model class that we’ll use throughout this article:

public class Teacher implements Serializable {
    private String gender;
    private boolean isActive;
    private List<String> courses = new ArrayList<>();
    private String additionalSkills;

3.1. Elvis Operator

The Elvis operator ?: lets us render text within an HTML element depending on the current state of a variable.

We can use default expressions to provide a default text if a variable is null:

<td th:text="${teacher.additionalSkills} ?: 'UNKNOWN'" />

Here we want to display the content of the teacher.additionalSkills variable if it is defined, and we want the text “UNKNOWN” to be rendered otherwise.

It’s also possible to display arbitrary text depending on a boolean expression:

<td th:text="${teacher.active} ? 'ACTIVE' : 'RETIRED'" />

We can query a simple boolean variable as in the previous example, but string comparisons and range checks are also possible.

The following comparators and their textual representations are supported: > (gt), >= (ge), < (lt), <= (le), == (eq) and != (ne).

3.2. If – Unless

The th:if and th:unless attributes allow us to render an HTML element depending on a provided condition:

<td>
    <span th:if="${teacher.gender == 'F'}">Female</span>
    <span th:unless="${teacher.gender == 'F'}">Male</span>
</td>

If the content of the teacher.gender variable equals to an F, the span element with the value Female is rendered. Otherwise, the element with Male is rendered.

Such a setup is comparable to an if-else clause present in most programming languages.

3.3. Switch – Case

If there are more than two possible results of an expression, we can use the th:switch and th:case attributes for the conditional rendering of the HTML elements:

<td th:switch="${#lists.size(teacher.courses)}">
    <span th:case="'0'">NO COURSES YET!</span>
    <span th:case="'1'" th:text="${teacher.courses[0]}"></span>
    <div th:case="*">
        <div th:each="course:${teacher.courses}" th:text="${course}"/>
    </div>
</td>

Depending on the size of the teacher.courses list, we either display a default text, the single course or all courses available. We use the asterisk (*) for the default option.

4. Conclusion

In this short article, we investigated the different types of Thymeleaf conditionals and presented some simplified examples showing the various options.

The examples can be found in the GitHub project.