Thymeleaf 使用时的标签

Posted atimo

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Thymeleaf 使用时的标签相关的知识,希望对你有一定的参考价值。

1 . onclick事件
   <a th:onclick="‘javascript:more()‘" ></a> 
2.引入CSS样式

 <link th:href="@{fore/css/public.css}" rel="stylesheet"> 
3.引入js 文件

 <script th:src="@{fore/js/index.js}" type="text/javascript"></script> 

4. 引入头部信息,和尾部信息
注:html(文件夹)/public.html 页面上的 头部和尾部信息引入

1 <!-- 导航 头部信息--> 
2 <!-- 导航 头部信息引入 --> 
3 <div class="nav-container" th:fragment="topper">
4 <div th:replace="html/public :: topper">
5 </div> 
6 <!-- 底部信息 -->
7 <!-- 底部信息引入 -->
8 <div class="att-bottom" th:fragment="footer">
9 <div th:replace="html/public :: footer"></div>

5. 图片引入
 <img th:src="@{fore/images/nav_icona.png}"/> 

6.页面遍历
 <li th:each="item,i:${list}"></li> 
7.if 判断 以及 th:text 取值

<span th:if="${item.types==1}" style="color:green;">
<span th:text=" ${item.coinNum}" ></span>
<i class=‘fa fa-database‘></i>
</span>

8.时间类型格式化

 <span th:text="${#dates.format(item.updateTime,‘yyyy/MM/dd HH:mm‘)}"></span> 

9.自定义标签属性
 <div th:attr="_tId=${item.taskId}"> 
10.获取css样式  <i class=‘fa fa-database‘></i>  
获取 <i class=‘fa fa-database‘></i> 图标样式 时,
<i>标签不能写在th:text <span>的取值中,
另写一个‘<span>‘标签 与取值的<span标签不属于同一标签内即可> (如下)

1 <span th:if="${item.types==1}" style="color:green;">
2 <span th:text=" ${item.coinNum}" > 
3 </span> <i class=‘fa fa-database‘></i> 
4 </span> 
这样即可获取 <i class=‘fa fa-database‘></i>  图标样式












以上是关于Thymeleaf 使用时的标签的主要内容,如果未能解决你的问题,请参考以下文章

thymeleaf引入公共页面的某个片段

Thymeleaf - 如何交互和重新加载 Javascript?

Java基础总结之Thymeleaf详解

使用片段时 Intellij 无法正确识别 Thymeleaf 模型变量

Spring boot:thymeleaf 没有正确渲染片段

Thymeleaf(第九十一二章)本地变量#属性优先级#注释和块#内联