thyleaf 语法

强烈建议参考 thyleaf官方文档

1. 输出变量

<p th:text="${user.name}">张三</p>

• 字符串拼接

<p th:text="'Hello ' + ${user.name} + ' ！'">Hello World ！</p>

• 链接

<!-- 将生成 /user/details?userId=3 这样的链接 -->
<a href="details.html" th:href="@{/user/details(userId=${u.id})}">details</a>

<!-- 将生成 /user/3/details 这样的链接 -->
<a href="details.html" th:href="@{/user/{userId}/details(userId=${u.id})}">details</a>

<!-- 将生成 /user/details?userId=3&phone=13687323234 这样的链接 -->
<a href="details.html" th:href="@{/user/details(userId=${u.id}, phone=${u.phone})}">details</a>

2. 循环（遍历）

• 基本用法

<ul th:each="user : ${users}">
  <li th:text="${user.name}">用户名</li>
</ul>

• 获取属性（索引、奇偶数等）

<ul th:each="user,userStat : ${users}">
  <li th:text="${user.name}" th:class="${userStat.odd} ? 'odd' : ''even">用户名</li>
</ul>

userStat是状态变量，有index,count,size,current,even,odd,first,last等属性
如果没有显示设置状态变量，thymeleaf会默认给个变量名+Stat的状态变量。

• index 当前遍历索引，从0开始
• count 当前遍历索引，从1开始
• size 总元素数量
• current 每一次遍历的iter变量
• even/odd 当前遍历是even还是odd，布尔属性
• first 当前遍历是第一个，布尔属性
• last 当前遍历是最后一个，布尔属性

遍历对象

<form th:object=${user}>
  用户名：<input type="text" th:field="*{name}" />
  密码：<input type="password" th:field="*{password}" />
</form>

如果user为空，这时页面就会直接报错。
下面的方法没有使用th:object，可以解决 user为空的问题

<form th:object=${user}>
  用户名：<input type="text" name="name" th:value="${user?.name}" />
  密码：<input type="password" name="password" th:value="${user?.password}" />
</form>

注意写法 th:value="${user?.name}"，它表示先判断user是否为空，不空的话使用 user.name 来赋值input的value属性。

扩展 【th:field 和 th:value 的区别】
field 计算机中意为：字段。value则单纯的指的是值。
th:field 要和 th:object 一起配合使用，且语法带星号th:field=*{}。不仅给input赋值，还顺带设置了 input的name属性
th:value 则是给input赋值

<input type="text" th:field="*{name}" />

会输出

<input type="text" name="name" value="张三" />

3. 条件

条件表达式

<p th:text="${user.sex == 1} ? '男' : '女'">用户性别</p>

if else

<p th:if="${user == null}">登录</p>

如果值为null，则th:if运算结果为false
th:if 不只运算布尔条件，它对以下情况也运算为true：

• 值不为null
• 值为boolean且为true
• 值为数字且非0
• 值为字符且非0
• 值是字符串且不是：false、off、no
• 值不是boolean、数字、字符、字符串

扩展：th:if 的反面是 th:unless

扩展：
gt：great than（大于）>
ge：great equal（大于等于）>=
eq：equal（等于）==
lt：less than（小于）<
le：less equal（小于等于）<=
ne：not equal（不等于）!=

switch

<div th:switch="${user.type}">
  <p th:case="'vip'">VIP用户</p>
  <p th:case="'common'">普通用户</p>
</div>

4. 函数

日期格式化

<span th:text="${#dates.format(time,'yyyy-MM-dd HH:mm:ss')}">2019-02-18 11:05:30</span>

集合

<div th:if="${#lists.size(userList) gt 10}">
  <a href="moreUrl">更多链接</a>
</div>

5. 页面元素属性操作

自定义属性 data-*

<p th:attr="data-user-id=${user.id},data-user-name=${user.name}"></div>

在js中就可以 $.data('user-id')、$.data('user-name') 来获取自定义属性值。