Thymeleaf常用的th标签属性

怼烎@ 2023-02-09 13:26 1阅读 0赞

<table> 
 <thead> 
  <tr> 
   <th align="center">标签属性</th> 
   <th align="center">功能描述</th> 
   <th align="center">示例</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="center">th:id</td> 
   <td align="center">替换id</td> 
   <td align="center"><code>&lt;input th:id="'xxx' + ${collect.id}"/&gt;</code></td> 
  </tr> 
  <tr> 
   <td align="center">th:text</td> 
   <td align="center">文本替换</td> 
   <td align="center"><code>&lt;p th:text="${collect.description}"&gt;description&lt;/p&gt;</code></td> 
  </tr> 
  <tr> 
   <td align="center">th:utext</td> 
   <td align="center">支持html的文本替换</td> 
   <td align="center"><code>&lt;p th:utext="${htmlcontent}"&gt;content&lt;/p&gt;</code></td> 
  </tr> 
  <tr> 
   <td align="center">th:object</td> 
   <td align="center">替换对象</td> 
   <td align="center"><code>&lt;div th:object="${session.user}"&gt;</code></td> 
  </tr> 
  <tr> 
   <td align="center">th:value</td> 
   <td align="center">属性赋值</td> 
   <td align="center"><code>&lt;input th:value = "${user.name}" /&gt;</code></td> 
  </tr> 
  <tr> 
   <td align="center">th:with</td> 
   <td align="center">变量赋值运算</td> 
   <td align="center"><code>&lt;div th:with="isEvens = ${prodStat.count}%2 == 0"&gt;&lt;/div&gt;</code></td> 
  </tr> 
  <tr> 
   <td align="center">th:style</td> 
   <td align="center">设置样式</td> 
   <td align="center"><code>&lt;div th:style="'display:' + @{(${sitrue} ? 'none' : 'inline-block')} + ''"&gt;&lt;/div&gt;</code></td> 
  </tr> 
  <tr> 
   <td align="center">th:onclick</td> 
   <td align="center">点击事件</td> 
   <td align="center"><code>&lt;td th:onclick = "'getCollect()'"&gt;&lt;/td</code></td> 
  </tr> 
  <tr> 
   <td align="center">th:each</td> 
   <td align="center">属性赋值</td> 
   <td align="center"><code>&lt;tr th:each = "user,userStat:${users}"&gt;</code></td> 
  </tr> 
  <tr> 
   <td align="center">th:if</td> 
   <td align="center">判断条件</td> 
   <td align="center"><code>&lt;a th:if = "${userId == collect.userId}"&gt;</code></td> 
  </tr> 
  <tr> 
   <td align="center">th:unless</td> 
   <td align="center">和th:if判断相反，满足条件时不显示</td> 
   <td align="center"><code>&lt;a th:href="@{/login} th:unless=${session.user != null}"&gt;Login&lt;/a&gt; &lt;!--如果用户已登录，则不显示登录按钮--&gt;</code></td> 
  </tr> 
  <tr> 
   <td align="center">th:href</td> 
   <td align="center">链接地址</td> 
   <td align="center"><code>&lt;a th:href="@{/login}" th:unless=${session.user != null}&gt;Login&lt;/a&gt;</code></td> 
  </tr> 
  <tr> 
   <td align="center">th:switch</td> 
   <td align="center">多路选择，配合th:case使用</td> 
   <td align="center"><code>&lt;div th:switch="${user.role}"&gt;</code></td> 
  </tr> 
  <tr> 
   <td align="center">th:fragment</td> 
   <td align="center">模板布局，类似jsp的tag</td> 
   <td align="center"><code>&lt;div th:fragment="footer"&gt;&amp;copy; 2013 Footer&lt;/div&gt;</code></td> 
  </tr> 
  <tr> 
   <td align="center">th:include</td> 
   <td align="center">布局标签，替换内容到引入的文件</td> 
   <td align="center"><code>&lt;head th:include="layout :: htmlhead" th:with="title='xx'"&gt;&lt;/head&gt;</code></td> 
  </tr> 
  <tr> 
   <td align="center">th:replace</td> 
   <td align="center">布局标签，替换整个标签到引入的文件</td> 
   <td align="center"><code>&lt;div th:replace="fragments/header :: title"&gt;&lt;/div&gt;</code></td> 
  </tr> 
  <tr> 
   <td align="center">th:selected</td> 
   <td align="center">select选择框选中</td> 
   <td align="center"><code>th:selected="(${xxx.id} == ${configObj.dd})"</code></td> 
  </tr> 
  <tr> 
   <td align="center">th:src</td> 
   <td align="center">图片类地址引入</td> 
   <td align="center"><code>&lt;img class="img-responsive" alt="App Logo" th:src="@{/img/logo.png}" /&gt;</code></td> 
  </tr> 
  <tr> 
   <td align="center">th:inline</td> 
   <td align="center">定义js脚本可以使用变量</td> 
   <td align="center"><code>&lt;script type="text/javascript" th:inline="javascript"&gt;</code></td> 
  </tr> 
  <tr> 
   <td align="center">th:action</td> 
   <td align="center">表单提交的地址</td> 
   <td align="center"><code>&lt;form action="subscribe.html" th:action="@{/subscribe}"&gt;</code></td> 
  </tr> 
  <tr> 
   <td align="center">th:remove</td> 
   <td align="center">删除某个属性</td> 
   <td align="center"><code>&lt;tr th:remove="all"&gt; 1.all:删除包含标签和所有的孩子。2.body:不包含标记删除,但删除其所有的孩子。3.tag:包含标记的删除,但不删除它的孩子。4.all-but-first:删除所有包含标签的孩子,除了第一个。5.none:什么也不做。这个值是有用的动态评估。</code></td> 
  </tr> 
  <tr> 
   <td align="center">th:attr</td> 
   <td align="center">设置标签属性，多个属性可以使用逗号分隔</td> 
   <td align="center"><code>比如 th:attr="src=@{/image/aa.jpg},title=#{logo}"，此标签不太优雅，一般用的比较少。</code></td> 
  </tr> 
 </tbody> 
</table>

**原文地址：**  
[https://www.jianshu.com/p/f9ebd23e8da4][https_www.jianshu.com_p_f9ebd23e8da4]

**供参考文章链接：**  
[Thymeleaf th:\* 设置/修改属性值详解][Thymeleaf th_]  
[https://www.blog-china.cn/blog/admin/home/75/1565658709580][https_www.blog-china.cn_blog_admin_home_75_1565658709580]  
[https://blog.csdn.net/qq\_42765068/article/details/85570660][https_blog.csdn.net_qq_42765068_article_details_85570660]  
[https://blog.csdn.net/likunpeng6656201/article/details/99442692][https_blog.csdn.net_likunpeng6656201_article_details_99442692]  
[https://blog.csdn.net/wangmx1993328/article/details/84747497][https_blog.csdn.net_wangmx1993328_article_details_84747497]  
[https://blog.csdn.net/whatlookingfor/article/details/78321451][https_blog.csdn.net_whatlookingfor_article_details_78321451]  
[https://www.cnblogs.com/shihuc/p/5090902.html][https_www.cnblogs.com_shihuc_p_5090902.html]  
[https://www.thymeleaf.org/documentation.html][https_www.thymeleaf.org_documentation.html]

[https_www.jianshu.com_p_f9ebd23e8da4]: https://www.jianshu.com/p/f9ebd23e8da4
[Thymeleaf th_]: https://blog.csdn.net/wangmx1993328/article/details/84674410
[https_www.blog-china.cn_blog_admin_home_75_1565658709580]: https://www.blog-china.cn/blog/admin/home/75/1565658709580
[https_blog.csdn.net_qq_42765068_article_details_85570660]: https://blog.csdn.net/qq_42765068/article/details/85570660
[https_blog.csdn.net_likunpeng6656201_article_details_99442692]: https://blog.csdn.net/likunpeng6656201/article/details/99442692
[https_blog.csdn.net_wangmx1993328_article_details_84747497]: https://blog.csdn.net/wangmx1993328/article/details/84747497
[https_blog.csdn.net_whatlookingfor_article_details_78321451]: https://blog.csdn.net/whatlookingfor/article/details/78321451
[https_www.cnblogs.com_shihuc_p_5090902.html]: https://www.cnblogs.com/shihuc/p/5090902.html
[https_www.thymeleaf.org_documentation.html]: https://www.thymeleaf.org/documentation.html