Thymeleaf基础语法讲解【详解版】

变量表达式 ${}

使用方法：直接使用th:xx = "${}" 获取对象属性 。例如：articles是一个集合，集合中的元素就是一个对象，articles[0]表示集合中第一个对象

<div th:text="hello"></div><form id="articleForm"><input id="id" name="id" th:value="${articles[0].id}"/><input id="author" name="author" th:value="${articles[0].author}"/><input id="content" name="content" th:value="${articles[0].content}"/></form>

选择变量表达式 *{}

使用方法：首先通过th:object 获取对象，然后使用th:xx = "*{}"获取对象属性。显示效果和上面的例子是一样的。

<form id="articleForm" th:object="${articles[0]}"><input id="id" name="id" th:value="*{id}"/><input id="author" name="author" th:value="*{author}"/><input id="content" name="content" th:value="*{content}"/></form>

链接表达式 @{}

使用方法：通过链接表达式@{}直接拿到应用路径，然后拼接静态资源路径。例如：

<link rel="stylesheet" th:href="@{/webjars/bootstrap/css/bootstrap.min.css}"><script th:src="@{/webjars/jquery/jquery.min.js} "></script><script th:src="@{/webjars/bootstrap/js/bootstrap.min.js}"></script>

html页面实际引入效果如下（这种方式会将webjars的版本号暴露出来，一定程度上造成安全问题，所以使用webjars就别用链接表达式）：

其它表达式

在基础语法中，默认支持字符串连接、数学运算、布尔逻辑和三目运算等。例如：

<div th:text="${'I am '+(articles[0].author!=null?articles[0].author:'NoBody')}"></div>

当articles[0].author不为null的时候，显示：zimug，否则显示：NoBody

二、迭代循环

---

想要遍历List集合很简单，配合th:each 即可快速完成迭代。但是我们通常有一些需求，在集合的迭代过程还可以获取状态变量。状态变量可用于获取集合的下标/序号、总数、是否为单数/偶数行、是否为第一个/最后一个。例如：

<table class="table"><tr><td>下标</td><td>序号</td><td>作者</td><td>教程名称</td><td>内容</td></tr><tr th:each="item,stat : ${articles}" th:class="${stat.even}?'even':'odd'"><td th:text="${stat.index}"></td><td th:text="${stat.count}"></td><td th:text="${item.author}"></td><td th:text="${item.title}"></td><td th:text="${item.content}"></td></tr></table>

迭代下标变量用法：

状态变量定义在一个th:每个属性和包含以下数据:

• index:当前迭代索引,从0开始。这是索引属性。

• count:当前迭代序号,从1开始。这是序号属性。

• size:元素的总量迭代变量。这是大小属性。

• current:变量为每个迭代,当前正迭代的元素

• even/odd:是否当前迭代是奇数还是偶数,布尔属性。

• first:是否第一个当前迭代,布尔属性。

• last:是否最后一个当前迭代,布尔属性。

显示效果如下：

其中表格隔行换色，即奇数行换色，是通过stat.even实现的。为奇数行单独设置背景颜色

<style type="text/css">.odd{
        background-color: #7d7d7d;}</style>

三、条件判断

---

条件判断通常用于动态页面的初始化，例如：

<div th:if="${articles}"><div>文章列表存在</div></div>

条件判断表达式可以是如下类型：

• boolean 类型并且值是 true, 返回 true

• 数值类型并且值不是 0, 返回 true

• 字符类型(Char)并且值不是 0, 返回 true

• String 类型并且值不是 "false", "off", "no", 返回 true

• 不是 boolean, 数值, 字符, String 的其他类型, 返回 true

• 对象值是 null, 返回 false

如果想取反则使用unless 例如：

<div th:unless="${articles}"><div>文章列表暂无.</div></div>