Thymeleaf 中 th:text 和 th:value 之间的区别

1、概览

Thymeleaf 是一种流行的 Java 模板引擎，它允许我们创建动态网页。它提供了多种属性，用于将数据从模型绑定到视图。

在本教程中，我们将了解 Thymeleaf 中 th:text 和 th:value 属性之间的主要区别。

2、th:text 属性

Thymeleaf 中的 th:text 属性用于设置元素的文本内容。

它还取代了标准的 HTML text 属性。因此，我们可以把它放在任何支持文本内容的 HTML 元素中，如标题、段落、标签等。

我们还可以使用该属性来显示动态文本内容，例如网页上的标题。

假设我们想在 HTML 页面上显示 controller 提供的 title 属性。

首先，让我们创建一个 controller 类和一个指定模型属性的方法：

@GetMapping
public String show(Model model) {
    model.addAttribute("title", "Baeldung");
    return "attributes/index";
}

接下来，我们将在标题元素中显示值：

<h1 th:text="${title}"/>

在这里，Thymeleaf 会计算表达式 ${title}，并将该值插入标题元素。

我们将得到的 HTML 如下：

<h1>Baeldung</h1>

此外，与标准 HTML text 属性不同，th:text 属性支持表达式。除了变量，这些表达式还可能包括运算符和函数。

例如，让我们在没有提供 title 属性的情况下指定默认值：

<h1 th:text="${title} ?: 'Default title'"/>

3、th:value 属性

另一方面，th:value 属性用于设置通常需要用户输入的元素的值。输入框、复选框、单选按钮和下拉按钮等元素都属于此类。

我们可以在任何有 value 属性的元素中使用该属性来代替标准的 HTML value 属性。因此，在不支持该属性的元素（例如段落）中添加该属性不会有任何效果。

首先，让我们创建一个简单的表单，其中包含一个 email input 字段：

<form th:action="@{/attributes}" method="post">
    <input type="email" th:value="${email}">
    <input type="submit" value="Submit"/>
</form>

接下来，让我们修改 controller 中的方法，并添加 email 属性：

@GetMapping
public String show(Model model) {
    model.addAttribute("title", "Baeldung");
    model.addAttribute("email", "default@example.com");
    return "attributes/index";
}

最后，Thymeleaf 会显示 input 元素内的值：

<input type="email" value="default@example.com">

由于我们在 input 字段中使用 th:value，因此我们更可能希望在表单提交时将值传回 controller。要传递值，我们需要指定 input 字段的 th:name 与 controller 方法中变量的名称一致：

<input th:name="email" type="email" th:value="${email}">

现在，我们可以在 controller 中添加一个 POST 方法来读取用户的输入：

@PostMapping
public String submit(String email) {
    logger.info("Email: {}", email);
    return "attributes/index";
}

该属性也支持表达式：

<input type="email" th:value:"${email} ?: 'default@email.com'"/>

4、总结

在本文中，我们了解了Thymeleaf 中 th:text 和 th:value 属性之间的区别。我们使用 th:text 属性指定元素的文本内容，使用 th:value 属性设置元素的值（value）。

参考：https://www.baeldung.com/java-thymeleaf-text-vs-value