1. 概述
Thymeleaf 是一个流行的服务器端 Java 模板引擎，它允许我们创建动态网页。它提供了多个属性，用于将模型数据绑定到视图。
在本教程中，我们将探讨 Thymeleaf 中 th:text 和 th:value 属性的关键区别。
2. th:text 属性
Thymeleaf 中的 th:text 属性用于设置元素的文本内容。
此外，它替代了标准 HTML 的 text 属性。因此，我们可以在任何支持文本内容的 HTML 元素（如标题、段落、标签等）中使用它。
此外，我们可以利用这个属性显示动态文本内容，例如网页上的标题。
假设我们想在 HTML 页面上显示控制器提供的 title 属性。
首先，创建一个控制器类和一个方法，并指定模型属性：
@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 属性。因此，将此属性添加到不支持它的元素（如段落）上不会产生任何效果。
首先，创建一个包含电子邮件输入字段的基本表单：
<form th:action="@{/attributes}" method="post">
<input type="email" th:value="${email}">
<input type="submit" value="Submit"/>
</form>
然后，修改控制器方法并添加 email 属性：
@GetMapping
public String show(Model model) {
model.addAttribute("title", "Baeldung");
model.addAttribute("email", "[email protected]");
return "attributes/index";
}
最后，Thymeleaf 将在输入元素内部显示值：
<input type="email" value="[email protected]">
由于我们在输入字段中使用 th:value，在提交表单时，我们更可能想要传递值回控制器。为了传递值，我们需要在输入字段的 th:name 格式上匹配变量名称：
<input th:name="email" type="email" th:value="${email}">
现在，我们可以为控制器添加一个 POST 方法来读取用户的输入：
@PostMapping
public String submit(String email) {
logger.info("Email: {}", email);
return "attributes/index";
}
th:value 属性也支持表达式：
<input type="email" th:value:"${email} ?: '[email protected]'"/>
4. 总结
在这篇文章中，我们研究了 Thymeleaf 中的 th:text 和 th:value 属性的区别。我们使用 th:text 属性来指定元素的文本内容，而 th:value 属性用于设置元素的值。
如往常一样，完整的源代码可在GitHub上获取。