3）Thymeleaf th:* 设置/修改属性值详解

偏执的太偏执、 2022-04-12 05:12 379阅读 0赞

**目录**

属性汇总

th:text 与 th:utext

th:attr 设置任意属性值

设置指定属性值

th:alt-title 和 th:lang-xmllang

固定值布尔属性

默认属性处理器

--------------------

# 属性汇总 #

> <html xmlns:th="http://www.thymeleaf.org">

<table> 
 <tbody> 
  <tr> 
   <td style="width:50px;"><strong>编号</strong></td> 
   <td style="text-align:center;width:121px;"><strong>属性</strong></td> 
   <td style="text-align:center;width:261px;"><strong>描述</strong></td> 
   <td style="text-align:center;"><strong>示例</strong></td> 
  </tr> 
  <tr> 
   <td style="width:50px;">1</td> 
   <td style="width:121px;">th:text</td> 
   <td style="width:261px;">计算其值表达式并将结果设置为标签的标签体</td> 
   <td>&lt;p th:text="${userName}"&gt;中国&lt;/p&gt;，<span style="color:#f33b45;">值为 null 为空时，整个标签不显示任何内容。</span></td> 
  </tr> 
  <tr> 
   <td style="width:50px;">2</td> 
   <td style="width:121px;">th:utext</td> 
   <td style="width:261px;">th:text 会对结果中的特殊字符转义，th:utext 不会转义</td> 
   <td>&lt;p th:utext="${userInfo}"&gt;中国&lt;/p&gt;,<span style="color:#f33b45;">值为 null 为空时，整个标签不显示任何内容。</span></td> 
  </tr> 
  <tr> 
   <td style="width:50px;">3</td> 
   <td style="width:121px;">th:attr</td> 
   <td style="width:261px;">为标签中的任意属性设置，可以一次设置多个属性</td> 
   <td>&lt;a href="" th:attr="title='前往百度',href='http://baidu.com'"&gt;前往百度&lt;/a&gt;</td> 
  </tr> 
  <tr> 
   <td style="width:50px;">4</td> 
   <td style="width:121px;">th:*</td> 
   <td style="width:261px;">为 html 指定的属性设值，一次设置一个</td> 
   <td>&lt;a href="" th:title='前往百度' th:href="'http://baidu.com'"&gt;前往百度&lt;/a&gt;</td> 
  </tr> 
  <tr> 
   <td style="width:50px;">5</td> 
   <td style="width:121px;">th:alt-title</td> 
   <td style="width:261px;">同时为 alt 与 title 属性赋值</td> 
   <td>&lt;a href="#" th:alt-title="'th:A-B'"&gt;th:A-B&lt;/a&gt;</td> 
  </tr> 
  <tr> 
   <td style="width:50px;">6</td> 
   <td style="width:121px;">th:lang-xmllang</td> 
   <td style="width:261px;">同时为&nbsp;lang 、xmllang 属性赋值</td> 
   <td>&lt;head lang="en" th:lang-xmllang="en"&gt;</td> 
  </tr> 
  <tr> 
   <td style="width:50px;">7</td> 
   <td style="width:121px;"><a href="https://blog.csdn.net/wangmx1993328/article/details/84747497" rel="nofollow">th:fragment</a></td> 
   <td style="width:261px;">定义模板片段</td> 
   <td>&lt;div&nbsp;th:fragment="copy"&gt;</td> 
  </tr> 
  <tr> 
   <td style="width:50px;">8</td> 
   <td style="width:121px;"><a href="https://blog.csdn.net/wangmx1993328/article/details/84747497" rel="nofollow">&nbsp;th:insert</a></td> 
   <td style="width:261px;">将被引用的模板片段插⼊到自己的标签体中</td> 
   <td>&lt;div&nbsp;th:insert="~{footer :: copy}"&gt;&lt;/div&gt;</td> 
  </tr> 
  <tr> 
   <td style="width:50px;">9</td> 
   <td style="width:121px;"><a href="https://blog.csdn.net/wangmx1993328/article/details/84747497" rel="nofollow">th:replace</a></td> 
   <td style="width:261px;">将被引用的模板片段替换掉自己</td> 
   <td>&lt;div th:replace="footer :: copy"&gt;&lt;/div&gt;</td> 
  </tr> 
  <tr> 
   <td style="width:50px;">10</td> 
   <td style="width:121px;"><a href="https://blog.csdn.net/wangmx1993328/article/details/84747497" rel="nofollow">th:include</a></td> 
   <td style="width:261px;">类似于 th:insert，⽽不是插⼊⽚段，它只插⼊此⽚段的内容</td> 
   <td><br> &lt;div th:include="footer :: copy"&gt;&lt;/div&gt;</td> 
  </tr> 
  <tr> 
   <td style="width:50px;">11</td> 
   <td style="width:121px;"><a href="https://blog.csdn.net/wangmx1993328/article/details/84747497" rel="nofollow">th:remove</a></td> 
   <td style="width:261px;">删除模板中的某些代码片段</td> 
   <td>&lt;tr th:remove="all"&gt;...</td> 
  </tr> 
  <tr> 
   <td style="width:50px;">12</td> 
   <td style="width:121px;"><a href="https://blog.csdn.net/wangmx1993328/article/details/84702386" rel="nofollow">th:each</a></td> 
   <td style="width:261px;">迭代数据，如 数组、List、Map 等</td> 
   <td>&lt;tr th:each="user : ${userList}"&gt;...</td> 
  </tr> 
  <tr> 
   <td style="width:50px;">13</td> 
   <td style="width:121px;"><a href="https://blog.csdn.net/wangmx1993328/article/details/84702386" rel="nofollow">th:if</a></td> 
   <td style="width:261px;">条件为 true 时,显示模板⽚段，否则不显示</td> 
   <td><br> &lt;p th:if="${isMarry}"&gt;已婚1&lt;/p&gt;</td> 
  </tr> 
  <tr> 
   <td style="width:50px;">14</td> 
   <td style="width:121px;"> <p><a href="https://blog.csdn.net/wangmx1993328/article/details/84702386" rel="nofollow">th:unless</a></p> </td> 
   <td style="width:261px;">条件为 false 时,显示模板⽚段，否则不显示</td> 
   <td><br> &lt;p th:unless="!${isMarry}"&gt;已婚2&lt;/p&gt;</td> 
  </tr> 
  <tr> 
   <td style="width:50px;">15</td> 
   <td style="width:121px;"> <p><a href="https://blog.csdn.net/wangmx1993328/article/details/84702386" rel="nofollow">th:switch&nbsp;</a></p> </td> 
   <td style="width:261px;">与 Java 中的 switch 语句等效，有条件地显示匹配的内容</td> 
   <td>&lt;div th:switch="1"&gt;</td> 
  </tr> 
  <tr> 
   <td style="width:50px;">16</td> 
   <td style="width:121px;"><a href="https://blog.csdn.net/wangmx1993328/article/details/84702386" rel="nofollow">th:case</a></td> 
   <td style="width:261px;">配合 th:switch 使用</td> 
   <td>&lt;div th:switch="1"&gt;<br> &nbsp; &nbsp; &lt;p th:case="0"&gt;管理员&lt;/p&gt;<br> &nbsp; &nbsp; &lt;p th:case="1"&gt;操作员&lt;/p&gt;<br> &nbsp; &nbsp; &lt;p th:case="*"&gt;未知用户&lt;/p&gt;<br> &lt;/div&gt;</td> 
  </tr> 
  <tr> 
   <td style="width:50px;">17</td> 
   <td style="width:121px;">&nbsp;<a href="https://blog.csdn.net/wangmx1993328/article/details/84766806" rel="nofollow">th:with</a></td> 
   <td style="width:261px;">定义局部变量</td> 
   <td>&lt;div th:with="userFirst=${userList[0]}"&gt;</td> 
  </tr> 
  <tr> 
   <td style="width:50px;">18</td> 
   <td style="width:121px;"> <p><a href="https://blog.csdn.net/wangmx1993328/article/details/84783202" rel="nofollow">th:inline</a></p> </td> 
   <td style="width:261px;">禁用内联表达式，内联js,内联css</td> 
   <td>&lt;script type="text/javascript" th:inline="javascript"&gt;</td> 
  </tr> 
 </tbody> 
</table>

# th:text 与 **th:utext** #

**1) th:text** 属性用于计算其值表达式并将结果设置为标签的标签体。举例如下：

--------------------------控制器------------------------
        @GetMapping("userHome")
        public String userHome(Model model) {
            logger.info("用户即将进入 hoem.html 页面.");
    
            /**浏览器访问后，返回数据给页面*/
            model.addAttribute("userName", "华安");
            return "user/home";
        }
    -------------------------home.html-----------------------
    <body>
    <p th:text="5+9">China</p>
    <p th:text="我爱中国">China</p>
    
    <p th:text="${userName}">中国</p>
    </body>

页面效果如下：

![20181130122820220.png][]

**2）th:utext**

th:text 属性对表达式中结果中的特殊字符默认会进行转义处理，如 “<b>China</b>,USA,UK” 会被转义成 “<b>China</b>,USA,UK”

th:utext 属性 (unescaped text) 则不会对结果进行转义

-------------------控制器------------------
        @GetMapping("userHome")
        public String userHome(Model model) {
            logger.info("用户即将进入 hoem.html 页面.");
    
            /**浏览器访问后，返回数据给页面*/
            model.addAttribute("china", "<b>Chian</b>,USA,UK");
            return "user/home";
        }
    -------------------home.html---------------
    <body>
    <p>Welcome to our <b>fantastic</b> grocery store!</p>
    
    <p th:text="${china}">默认转义</p>
    
    <p th:utext="${china}">不会转义</p>
    </body>

效果如下：

![20181130132454657.png][]

# th:attr 设置任意属性值 #

th:attr 通过⼀个表达式即可将值赋给任意的多个属性，th:attr 以逗号分隔的形式来设置多个属性值。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdteDE5OTMzMjg_size_16_color_FFFFFF_t_70][]

# 设置指定属性值 #

项目中通常使⽤ th:\* 来特定的属性值，例如设置 value 属性，使⽤ th:value，设置 name 属性，则是 th:name 等等。

效果与上面 th:attr 完全一样。

HTML5 所有的属性，都可以使用 th:\* 的形式进行设置值。

# th:alt-title 和 th:lang-xmllang #

th:alt-title 表示同时为 alt 属性与 title 属性赋值相同的值；th:lang-xmllang 表示同时为 lang 属性 xmllang 属性赋值相同的值。

注意：因为 alt 与 title 表达的意义基本相同，lang 与 xmllang 作用基本相同，所以 Thymeleaf 才为它们创建了这两个属性，对于其它的属性，则不能使用 "-" 进行操作。如 不能使用 th:href-title 来为 href 属性与 title 属性同时赋值相同的值。

> <img src="../../images/gtvglogo.png" th:attr="src=@\{/images/gtvglogo.png\},title=\#\{logo\},alt=\#\{logo\}" />
> 
> 等价于
> 
> <img src="../../images/gtvglogo.png" th:src="@\{/images/gtvglogo.png\}" th:title="\#\{logo\}" th:alt="\#\{logo\}" />
> 
> 等价于
> 
> <img src="../../images/gtvglogo.png" th:src="@\{/images/gtvglogo.png\}" th:alt-title="\#\{logo\}" />

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdteDE5OTMzMjg_size_16_color_FFFFFF_t_70 1][]

# 固定值布尔属性 #

HTML 具有布尔属性的概念，这个布尔属性没有值，并且⼀旦这个布尔属性存在则意味着属性值为 “true”。 但是在 XHTML中，这些属性只取⼀个值，这个属性值就是它本身。

> 例如，checked 属性：  
> <input type="checkbox" name="option1" checked />     
> <input type="checkbox" name="option21" checked="checked" />

Thymeleaf 标准⽅⾔允许通过计算条件表达式的结果来设置这些属性的值，如果条件表达式结果为 true，则该属性将被设置为其固定值，如果结果为 false，则不会设置该属性。

<body>
    
    <input type="checkbox" name="option1" checked/><span>是否已婚1？</span>
    <input type="checkbox" name="option2" checked="checked"/><span>是否已婚2？</span>
    
    
    
    <input type="checkbox" name="option3" th:checked="${isMarry}"/><span>是否已婚3？</span>
    <input type="radio" name="option4" th:checked="${isMarry}"/><span>是否本科？</span>
    <input type="radio" name="option5" th:checked="!${isMarry}"/><span>是否应届生？</span>
    </body>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdteDE5OTMzMjg_size_16_color_FFFFFF_t_70 2][]

Thymeleaf 标准⽅⾔还⽀持以下固定值布尔属性：

<table> 
 <tbody> 
  <tr> 
   <td style="width:278px;">th:async</td> 
   <td style="width:303px;">th:autofocus</td> 
   <td style="width:269px;">th:autoplay</td> 
  </tr> 
  <tr> 
   <td style="width:278px;">th:checked</td> 
   <td style="width:303px;">th:controls</td> 
   <td style="width:269px;">th:declare</td> 
  </tr> 
  <tr> 
   <td style="width:278px;">th:default</td> 
   <td style="width:303px;">th:defer</td> 
   <td style="width:269px;">th:disabled</td> 
  </tr> 
  <tr> 
   <td style="width:278px;">th:formnovalidate</td> 
   <td style="width:303px;">th:hidden</td> 
   <td style="width:269px;">th:ismap</td> 
  </tr> 
  <tr> 
   <td style="width:278px;">th:loop</td> 
   <td style="width:303px;">th:multiple</td> 
   <td style="width:269px;">th:novalidate</td> 
  </tr> 
  <tr> 
   <td style="width:278px;">th:nowrap</td> 
   <td style="width:303px;">th:open</td> 
   <td style="width:269px;">th:pubdate</td> 
  </tr> 
  <tr> 
   <td style="width:278px;">th:readonly</td> 
   <td style="width:303px;">th:required</td> 
   <td style="width:269px;">th:reversed</td> 
  </tr> 
  <tr> 
   <td style="width:278px;">th:scoped</td> 
   <td style="width:303px;">th:seamless</td> 
   <td style="width:269px;">th:selected</td> 
  </tr> 
 </tbody> 
</table>

# 默认属性处理器 #

Thymeleaf 提供了⼀个默认属性处理器，允许设置任何属性的值，即使在标准⽅⾔中没有为其定义特定的 th:\* 处理器,即使属性不是 html 的标准属性，如：

[20181130122820220.png]: /images/20220412/ccae9c3c2a2e4d6cb857ecd37057ef73.png
[20181130132454657.png]: /images/20220412/91c0fd5e7b874f5b8c6b42c72c24b360.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdteDE5OTMzMjg_size_16_color_FFFFFF_t_70]: /images/20220412/ea62763ceaac48718633f4695e4975a3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdteDE5OTMzMjg_size_16_color_FFFFFF_t_70 1]: /images/20220412/9269aacf7a944a3dbfaabcd9f697fc46.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdteDE5OTMzMjg_size_16_color_FFFFFF_t_70 2]: /images/20220412/182f2e0cc4c845f3b3cc1c1d35e4363d.png