1.创建HTML
由上文也可以知道需要在html中添加:
<html xmlns:th="http://www.thymeleaf.org">
这样,下文才能正确使用th:*形式的标签!
2.获取变量值${…}
通过${…}进行取值,这点和ONGL表达式语法一致!
<!--/*@thymesVar id="name" type="java.lang.String"*/-->
<p th:text="'Hello!, ' + ${name} + '!'">3333</p>
3.链接表达式: @{…}
用来配合link src href使用的语法,类似的标签有:th:href和th:src
4.文本替换
th:text
可对表达式或变量求值,并将结果显示在其被包含的 html
标签体内替换原有html
文本,文本连接:用“+”
符号,若是变量表达式也可以用“|”
符号(只能包含表达式变量,而不能有条件判断等!)
<span th:text="'文本' + ${obj.text} + '!'">
或者下面的表达方式:
<span th:text="|文本, ${obj.text}!|">
th:utext
会解析html中的标签,在页面中显示相应的样式
5.条件
if/unless
使用th:if和th:unless属性进行条件判断,th:unless于th:if恰好相反,只有表达式中的条件不成立,才会显示其内容。
<a th:href="@{/login}" th:unless=${session.user != null}>Login</a>
switch
<div th:switch="${user.role}">
<p th:case="'admin'">User is an administrator</p>
<p th:case="#{roles.manager}">User is a manager</p>
<p th:case="*">User is some other thing</p>
</div>
6.循环(th:each
)
th:each
属性用于迭代循环,语法:th:each="obj,index:${objList}"
,迭代对象可以是java.util.List
,java.util.Map
,数组等;
index
称作状态变量,属性有:
index
:当前迭代对象的index
(从0开始计算)
count
: 当前迭代对象的index
(从1开始计算)
size
:被迭代对象的大小
current
:当前迭代变量
even/odd
:布尔值,当前循环是否是偶数/奇数(从0开始计算)
first
:布尔值,当前循环是否是第一个
last
:布尔值,当前循环是否是最后一个
7.内置对象Utilites
#dates
:日期格式化内置对象,具体方法可以参照java.util.Date
;
#calendars
:类似于#dates
,但是是java.util.Calendar
类的方法;
#numbers
: 数字格式化;
#strings
:字符串格式化,具体方法可以参照java.lang.String
,如startsWith
、contains
等;
#objects
:参照java.lang.Object
;
#bools
:判断boolean
类型的工具;
#arrays
:数组操作的工具;
#lists
:列表操作的工具,参照java.util.List
;
#sets
:Set操作工具,参照java.util.Set
;
#maps
:Map操作工具,参照java.util.Map
;
#aggregates
:操作数组或集合的工具;
#messages
:操作消息的工具。
需要注意的是:
· 内置对象一般都以s
结尾,如dates
、lists
、numbers
等
· 在使用内置对象是在对象名前都需要加#号。
- 日期格式化
使用内置对象dates
的format
函数即可对日期进行格式化,在format
函数中,第一个参数是日期对象,对二两个参数为日期格式(规则跟SimpleDateFormat
一样)
<span th:text="${#dates.format(curDate, 'yyyy-MM-dd HH:mm:ss')}"></span>
- 数字格式化
1、此示例表示保留两位小数位,整数位自动;
<span th:text="${#numbers.formatDecimal(money, 0, 2)}"></span>
2、此示例表示保留两位小数位,3位整数位(不够的前加0)
<span th:text="${#numbers.formatDecimal(money, 3, 2)}"></span>
- 获取列表长度
使用 #lists.size
来获取List的长度。
<span th:text="${#lists.size(datas)}"></span>
- 获取URL参数值
当访问http://localhost:1105/index?page=5
时页面将会得到page
对应的值:5
<span th:text="${#httpServletRequest.getParameter('page')}"></span>
- 定义变量
当访问http://localhost:1105/index?page=5
时,页面将显示:当前页码:5
,说明用th:with
来定义变量,多个用,
号隔开,使用范围在当前标签内。
<div th:with="curPage=${#httpServletRequest.getParameter('page')}">
<h3>当前页码:<span th:text="${curPage}"></span></h3>
</div>
- 自定义标签属性
在页面上查看源代码可以看到:,说明自定义属性用:th:attr,多个属性用,隔开。
<span th:attr="myDate=${#dates.format(curDate, 'yyyy-mm-dd')}, myMoney=${money}"></span>
- 判断是否为空
${obj.empty}
<tr th:if="${messages.empty}">
<td colspan="3">No messages</td>
</tr>
- 在JS中访问model模型数据
<script th:inline="javascript">
var data= [[${data}]]
console.log(data.name + "\t" + data.age);
</script>
8.事件
1、点击事件click
<input type="button" th:onclick="|javascript:functionName(${argument1},${argument2})|" value = "点击" />