springboot(thymeleaf)中th:field和th:value的区别及说明

在 SpringBoot 中使用 Thymeleaf 模版引擎时，常会使用 th:field 和 th:value，这两个指令都用于绑定表单数据和模型数据。

th:value 指令

th:value 指令用于将表单元素的 value 值设置为指定的表达式的值。

示例：

<form>
  <input type="text" th:value="${user.name}" />
</form>

这个例子中， th:value="${user.name}" 将输入框的 value 属性设置为 user.name。当模型数据(user)中的 name 属性发生变化时，输入框中的内容也会跟着变化。

th:field 指令

th:field 指令用于将表单元素和模型对象的属性进行绑定，它是一个集成指令，包含了 th:name、th:value 和 th:error 三个指令，可大大简化表单绑定的代码量。

示例：

<form th:object="${user}" method="post">
  <input type="text" th:field="*{name}" />
  <span th:if="${#fields.hasErrors('name')}" 
    th:errors="*{name}">Name Error Message</span>
  <button type="submit">Submit</button>
</form>

这个例子中， th:field="{name}" 将输入框和模型对象 user 的 name 属性进行绑定，当输入框的值发生变化时，user 对象的 name 属性也会跟着变化。同时， th:errors="{name}" 用于显示错误信息。

当模型数据与表单元素绑定时，通过使用 th:field 指令，可以实现表单及相应模型数据的自动设置和验证机制。