Thymeleaf教程：属性值设置详解

Thymeleaf作为一款现代化的Java模板引擎，提供了丰富的属性设置功能，让开发者能够灵活地操作HTML元素的属性。本文将深入讲解Thymeleaf中设置属性值的各种方式。

基础属性设置

th:attr通用属性设置

th:attr是Thymeleaf中最基础的属性设置方式，可以设置任意HTML属性：

<form action="subscribe.html" th:attr="action=@{/subscribe}">
  <input type="submit" value="Subscribe!" th:attr="value=#{subscribe.submit}"/>
</form>

渲染结果：

<form action="/gtvg/subscribe">
  <input type="submit" value="¡Suscríbe!"/>
</form>

th:attr支持同时设置多个属性，用逗号分隔：

<img src="logo.png" th:attr="src=@{/images/logo.png},title=#{logo},alt=#{logo}"/>

专用属性设置器

虽然th:attr很强大，但Thymeleaf为常见HTML属性提供了专门的设置器，使代码更加简洁：

<!-- 使用专用属性设置器 -->
<input type="submit" th:value="#{subscribe.submit}"/>
<form th:action="@{/subscribe}">...</form>

Thymeleaf几乎为所有HTML5属性都提供了对应的th:*设置器，包括：

• th:id、th:name、th:value等基础属性
• th:class、th:style等样式属性
• th:onclick、th:onchange等事件属性
• th:src、th:href等资源属性

高级属性操作

多属性同时设置

Thymeleaf提供了两个特殊的复合属性设置器：

1. th:alt-title：同时设置alt和title属性
2. th:lang-xmllang：同时设置lang和xml:lang属性

<img th:src="@{/logo.png}" th:alt-title="#{logo}"/>

属性值追加

Thymeleaf提供了属性值追加功能：

• th:attrappend：在现有属性值后追加内容
• th:attrprepend：在现有属性值前添加内容

<input class="btn" th:attrappend="class=${' '+status}"/>
<!-- 当status='warning'时渲染为 -->
<input class="btn warning"/>

对于class和style属性，还有专门的追加器：

• th:classappend：追加class
• th:styleappend：追加style

<tr class="row" th:classappend="${odd}? 'odd'">

布尔属性处理

HTML中的布尔属性（如checked、disabled等）在Thymeleaf中有特殊处理方式：

<input type="checkbox" th:checked="${user.active}"/>

当user.active为true时渲染为：

<input type="checkbox" checked="checked"/>

为false时则不会添加checked属性。

Thymeleaf支持的所有布尔属性包括：

• th:checked、th:disabled、th:readonly等表单相关属性
• th:autofocus、th:required等HTML5属性
• th:loop、th:controls等媒体相关属性

HTML5友好语法

Thymeleaf支持HTML5的data-*属性语法，使得模板更加符合现代Web标准：

<table>
    <tr data-th-each="user : ${users}">
        <td data-th-text="${user.login}">...</td>
    </tr>
</table>

这种语法与传统的th:*语法完全等效，但更加符合HTML5规范。

默认属性处理器

当Thymeleaf遇到未定义的th:*属性时，会使用默认属性处理器，直接将计算结果设置为属性值：

<span th:custom-attr="${value}">...</span>
<!-- 渲染为 -->
<span custom-attr="some value">...</span>

总结

Thymeleaf提供了多种灵活的方式来设置和操作HTML属性：

1. 使用th:attr进行通用属性设置
2. 使用专用th:*属性设置器简化代码
3. 使用复合属性设置器同时设置多个属性
4. 使用属性追加器动态修改属性值
5. 特殊处理布尔属性
6. 支持HTML5友好的data-th-*语法
7. 默认属性处理器提供最大灵活性

掌握这些属性设置技巧，能够让你在Thymeleaf模板开发中更加得心应手，编写出既简洁又强大的模板代码。