Thymeleaf 中 th:text 和 th:value 的區別

一、概述

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";
 }

該屬性也支持表達式：

<input type="email" th:value:"${email} ?: '[email protected]'"/>

4。結論

在本文中，我們研究了 Thymeleaf 屬性th:text和th:value之間的區別。我們使用th:text屬性指定元素的文本內容，使用th:value屬性設置元素的值。

一如既往，整個源代碼都可以在 GitHub 上找到。