一，Thymeleaf 介绍
Thymeleaf 是一个 服务器 端 Java 模板引擎 ， 类似于 FreeMarker 、 Velocity 等模板 。 它是
Java 服务器端 HTML5 开发的理想选择 。 并且能够很好的和 Spring Boot 集成 。Thymeleaf 的主要目标是为 程序员 的开发工作流程带来优雅的自然模板 ， 它可以作为静态原型来使用 ，
这对前后端分离的开发团队来说无疑是一种很好的体验 。Thymeleaf 开箱即用 ， 它提供了一套标准方言 ， 所有的数据都是通过标签 th:* 来完成 。 如：
Welcome to BeiJing! 当它作为静态文件运行时 ，
Thymeleaf 会过虑 th: 标签属性 ， 显示静态文本值 Welcome to BeiJing! 。当它运行在服务器环境时 ， Thymeleaf 会使用 th: 标签属性的值替换掉静态文本的值 ， 动态显示 ${message}
的具体内容 。除了上面提到的 th:text ， Thymeleaf 还提供了许多其他功能 ， 这些功能对于大多数情况是足够满足日常开发的需求的 ，
下面来一一做介绍 。
如何用Thymeleaf来创建一个有效的html页面呢？
1 2 3 4 5 6 7 8 9 10 11 | <!DOCTYPE HTML> <html xmlns:th="http://www.thymeleaf.org"> <head> <title>Welcome Page</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> </head> <body> <span th:text="${message}">Welcome to BeiJing!</span> </body> </body> </html> |
正如你所见，这是一个html页面文件，它可以在任何浏览器上正确的显示(浏览器会忽略它不能识别的标签 th:text)，但这不是一个标准的html页面文件，因为html页面规范是不允许出现 th: 这些非标准属性的，而且我们还加了 xmlns:th=“http://www.thymeleaf.org” 属性。
实际上，我们不写 xmlns:th=“http://www.thymeleaf.org” 属性对页面是不产生什么影响的，它只是防止IDEA找不到像 th:属性命名空间的错误，但对页面的正常显示是不产生影响的。
因此，我们甚至可以不用 th:* 属性，我们可以切换到Thymeleaf的属性语法，用data-th 来代替 th:
1 2 3 4 5 6 7 8 9 10 11 | <!DOCTYPE HTML> <html> <head> <title>Welcome Page</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> </head> <body> <span data-th-text="${message}">Welcome to BeiJing!</span> </body> </body> </html> |
html 5 规范是允许 data- * 这样自定属性的。至此，我们已经把模板改造成了一个真正有效的 HTML 文档。
th:* 和data-th-* 这两个符号是完全等效且是可以互换的 。 为了简单直观和代码的紧凑性 ， 这里采用th:* 的表示方式 。
二，标准表达式语法
Thymeleaf 提供了非常丰富的标准表达式语法 ， 总共有 8 大类 ， 它们分别是：
- 简单表达式
- 字面值
- 文本操作
- 算术运算
- 布偶运算
- 比较和相等
- 条件运算
- 无操作符
1：简单表达式
Thymeleaf 提供的简单表达式语法有 5 类 ， 它们分别是：
| 语法 | 名称 | 描述 | 作用 |
|---|---|---|---|
| ${} | Variable Expressions | 变量表达式 | 取出上下文变量的值 |
| *{} | Selection Variable Expressions | 选择变量表达式 | 取出选择的对象的属性值 |
| #{} | Message Expressions | 消息表达式 | 使文字消息国际化 ， I18N |
| @{} | Link URL Expressions | URL链接表达式 | 用于表示各种超链接地址 |
| ~{} | Fragment Expressions | 代码片段表达式 | 引用一段公共的代码 |
${…}
下面这段代码是取出上下文环境中message变量的值。
1 | <span th:text='${message}'></span> |
内置对象
跟 JSP 相像的 ， Thymeleaf 也为我们提供了一些内置的对象变量 ， 它们都是以 # 开头表示：
| 语法 | 描述 |
|---|---|
| #ctx | 上下文对象 |
| #vars | 上下文变量 |
| #locale | 上下文区域变量 |
| #request | HttpServletRequest 对象 |
| #response | HttpServletResponse 对象 |
| #session | HttpSession 对象 |
| #servletContext | ServletContext 对象 |
举个例子：
1 2 3 4 | <!-- zh_CN --> <p th:text="${#locale}"></p> <!-- name --> <p th:text="${#session.user.name}"></p> |
工具类
另外 ， Thymeleaf 还提供了许多内置的 工具 类 ， 它们也是以 # 开头：
| 对象 | 描述 |
|---|---|
| #messages | 消息工具类 ， 与 ＃{} 作用相同； |
| #uris | 地址相关工具类 |
| #conversions | 对象转换工具类 |
| #dates | 日期转换工具类 |
| #calendars | 日历工具类 |
| #numbers | 数字工具类 |
| #strings | 字符串工具类 |
| #objects | 对象工具类 |
| #bools | 布偶工具类 |
| #arrays | 数组工具类 |
| #lists | List工具类 |
| #sets | Sets工具类 |
| #maps | maps工具类 |
举个例子：
1 2 3 4 5 6 | <p th:text="${#lists.isEmpty(cities)}"></p> <p th:text="${not #lists.isEmpty(cities)}"></p> <!-- 2020年4月4日 下午016时01分12秒 历史难忘的日子--> <p th:text="${#dates.format(now)}"></p> <!-- 2020年4月4日 下午016时01分12秒--> <p th:text="${#dates.format(now, 'yyyy-MM-dd HH:mm:ss')}"></p> |
*{…}
使用 * { } 表达式时，如果没有选择对象，那么， * { } 和 ${} 表达式表达的效果是一样的。
1 2 | <p th:text='*{user.name}'></p> <p th:text='${user.name}'></P> |
* { } 表达式的上下文是父标签（ th:object ）所选择的对象 ， 而 ${} 表达式是面向整个上下文的 ， 这是 * { } 和 ${} 表达式语法的一个重要的区别 。
1 2 3 4 5 | <div th:object='${user}'> name:<p th:text='*{name}'></p> age:<p th:text='*{age}'></p> sex:<p th:text='*{sex}'></p> </div> |
它相当于：
1 2 3 4 5 | <div> name:<p th:text='${user.name}'></p> age:<p th:text='${user.age}'></p> sex:<p th:text='${user.sex}'></p> </div> |
# {…}
首先我们了解一下 i18n 资源文件的命名规则：
- basename.properties
- basename_language.properties
- basename_language_country.properties
其中 ， basename 是自定义的资源文件名称 ， language 和 country 必须是 Java 支持的语言和国家 。basename.properties 是缺省加载的资源文件 ， 它是必须存在的 。 当客户端根据本地语言查找不到相关的资源文件时 ， 则使用 basename.properties 。
处理静态消息
我们来创建以下几个文件：
1． /src/main/resources/i18n/messages.properties
welcome.message=北京欢迎你！
- /src/main/resources/i18n/messages_en_US.properties
welcome.message=Welcome to BeiJing!
- /src/main/resources/application.properties （Spring Boot）
spring.messages.basename:i18n/messages
举个例子：
1 | <p th:text='#{welcome.message}'></p> |
处理非静态消息
#{ } 表达式是不能直接处理非静态消息的，我们可以在资源文件中使用 占位符 { } 来处理非静态消息。
/src/main/resources/i18n/messages.properties
welcome.user={0}，欢迎来到北京！
使用时，通过消息的键值以参数的形式来传递变量。
1 | <p th:text='#{welcome.user(${user.name})}'></p> |
@{…}
在WEB应用开发里面URL的链接地址是非常常见的，@{ } 表达式就是专门用来处理URL链接的：
1 2 3 4 5 6 7 8 9 10 | <!-- /css/mian.css --> <p th:text="@{/css/mian.css}"></p> <!-- /css/mian.css?v=1.0 --> <p th:text="@{/css/mian.css(v=1.0)}"></p> <!-- /user/order?uid=1001 --> <p th:text="@{/user/order(uid=${user.id})}"></p> <!-- /user/order?uid=1001&status=PAIED --> <p th:text="@{/user/order(uid=${user.id},status='PAIED')}"></p> <!-- /user/1001/info --> <p th:text="@{/user/{uid}/info(uid=${user.id})}"></p> |
绝对地址：
1 2 | <!-- https://blog.csdn.net/qq_44538738 --> <a th:href='@{https://blog.csdn.net/qq_44538738}'></a> |
页面相对地址(相对于当前服务)：
1 2 | <!-- commons/util.js --> <script th:src="@{commons/util.js}"></script> |
服务器相对地址(相对于部署在同一个服务器中的不同服务)：
1 2 | <!-- /image/upload --> <img th:src="@{~/image/upload}"/> |
~{…}
当需要引用某个模板文件的公共的 HTML 代码片段时 ， 可以使用 ~{ } 语法：
| 语法 | 描述 |
|---|---|
| ~{templatename :: selector} | selector 可以是 th:fragment 指定的名称 ， 如 ~{footer :: base} 。 也可以是其他选择器 ， 如类选择器 、 ID选择器等； |
| ~{templatename} | 引用整个模板文件的代码片段； |
| ~{::selector} | 相当于 ~{this :: selector} ， 表示引用当前模板定义的代码片段； |
具体参考模板布局章节。
字面值
什么是字面值？首先它不是一个变量 ， 它是一个具体的确切的值 ， 通常这些值是比较简单的 ， 例如： 18 、 ‘welcome’ 等 ， 它们没有名称 ， 以至于我们只能用值来称呼它们 ， 因此我们称其为字面值 。
文字字面值
文字字面值是用单引号引起来的任何字符内容 ， 如果字符内容里面含有单引号 ， 则需要进行转义：
1 2 3 4 | <!-- Welcome to BeiJing! --> <p th:text="'Welcome to BeiJing!'"></p> <!-- 'Welcome to BeiJing!' --> <p th:text="'\'Welcome to BeiJing!\''"></p> |
数字字面值
1 2 3 4 | <!-- 2017 --> <p th:text="2017"></p> <!-- 2018 --> <p th:text="2017 + 1"></p> |
布尔字面值
1 2 3 4 | <!-- false --> <p th:text="1 > 2"></p> <!-- 否 --> <p th:text="1 > 2 ? '是' : '否'"></p> |
空字面值
1 2 | <!-- false --> <p th:text="${user == null}"></p> |
字面令牌
字面令牌（Literal Tokens）的内容只能含有（不能含有空格 、 特殊符号等）：
- 大小写字母
- 0 - 9 的数字
- 中括号
- 下划线
- 连字符（-）
- 点（.）
- 中文（官方文档未提及）
- 其它
实际上 ， 数字 、 布尔和空字面值都是字面令牌的特殊情况 。
字面令牌能够用来对标准表达式语法进行简化（可以将包裹它的单引号去掉）：
1 2 3 | <p th:text="BeiJing"></p> 它等效于： <p th:text="'BeiJing'"></p> |
文本操作
文本操作包含字符连接和替换的操作 。
字符串连接
不管是字面值还是表达式的结果 ， 我们都可以使用 + 符号将它们连接起来：
1 2 | <!-- Welcome to BeiJing! --> <p th:text="'Welcome to ' + ${province.name} + '!'"></p> |
字面值替换
|| 符号可以用来将字面值和表达式包裹起来 ， 这样就能方便的替换变量的值 ， 而不需要使用 + 连接符：
1 2 | <!-- Welcome to BeiJing! --> <p th:text="|Welcome to ${province.name}!|"></p> |
算术运算
支持+ （加） 、 - （减） 、 * （乘） 、 / （除） 、 % （模）运算：
1 2 3 4 5 6 7 8 9 10 | <!-- 6 --> <p th:text="4 + 2"></p> <!-- 2 --> <p th:text="4 - 2"></p> <!-- 8 --> <p th:text="4 * 2"></p> <!-- 2 --> <p th:text="4 / 2"></p> <!-- 0 --> <p th:text="4 % 2"></p> |
布偶运算
支持 and （且） 、 or （或） 、 ! （非） 、 not （非）运算：
1 2 3 4 | <p th:text="${user.online and user.vip}"></p> <p th:text="${user.online or user.vip}"></p> <p th:text="${!user.online}"></p> <p th:text="${not user.online}"></p> |
比较和相等
支持 < （ lt ） 、> （ gt ） ，<= （ le ） 、 >= （ ge ） 、== （ eq ） 、 ！= （ ne ）：
1 2 3 4 5 6 | <p th:text="${user.age < 60}"></p> <p th:text="${user.age <= 60}"></p> <p th:text="${user.age > 18}"></p> <p th:text="${user.age >= 18}"></p> <p th:text="${user.age == 18}"></p> <p th:text="${user.age != 18}"></p> |
条件运算
三元运算符： (if) ? (then) : (else)
1 2 | <p th:text="${user.online ? '在线' : '离线'}"></p> <p th:text="${user.online ? (user.vip ? 'VIP用户在线' : '普通用户在线') : '离线'}"></p> |
二元运算符：(value) ?: (defaultValue) ， 其中 ， value 非空（null）即真 ， 条件为真时输出 value ， 否则输出 defaultValue 。
假设 token = null ，user.email = [email protected]
1 2 3 4 | <!-- 你还没有登录<span class="fuhao">，</span>请先登录 --> <p th:text="${token} ?: '你还没有登录<span class="fuhao">，</span>请先登录'"></p> <!-- [email protected] --> <p th:text="${user.email} ?: '你还没有绑定邮箱'"></p> |
无操作符：
当模板运行在服务器端时 ， 无论如何 Thymeleaf 都会用 th:* 属性的具体值替换标签体的内容 。
无操作符（ _ ）则允许使用原型标签体的内容作为默认值：
1 2 | <!-- 你还没有登录<span class="fuhao">，</span>请先登录 --> <p th:text="${token} ?: _">你还没有登录<span class="fuhao">，</span>请先登录</p> |
使用文本
了解了标准表达式的语法之后 ， 接下来介绍如何正确的使用它们 。
标准表达式通常需要搭配 th:* 属性来使用 ， 这样 Thymeleaf 引擎才能正确的解析出表达式的结果 。
首先介绍两个最基础的 th:* 属性 ， 它们分别是： th:text 和 th:utext ， 这两个属性都是用于处理文本内容 。
th:text
在标签中显示表达式的值的文本内容：
1 | <span th:text="${message}"></span> |
使用外部化文本内容：
1 | <span th:text="${message}">Welcome to BeiJing!</span> |
当它作为静态文件直接允许时，浏览器会自动忽略不能识别的 th:text 标签，而显示 span 标签体的文本内容。
当它作为模板文件直接运行在服务器时， th:text 属性标签的值 会直接替换 span 里的文本内容。
th:utext
th:text 和 th:utext 的区别在于：
- th:text 默认会对含有HTML 标签的内容进行转义。
- th:utext 则不会对含有HTML 标签的内容进行转义。
假设：message = “Welcome to BeiJing!”
th:text 例子：
1 | <span th:text="${message}"></span> |
th:text 结果：
1 | <b>Welcome to BeiJing!</b> |
th:utext 例子：
1 | <span th:utext="${message}"></span> |
th:utext 结果：
Welcome to BeiJing!
设置属性值
在 Thymeleaf 模板文件中 ， 你可以使用 th:* （或者使用 th:attr 属性）来设置任意的 HTML5 标签属性的值 。 不仅如此 ， 你还可以 th:- 来同时为多个不同的标签属性设置相同的一个值 ， 甚至你可以使用 th:attrappend 和 th:attrprepend 来追加新的值到现有的标签属性值中 。
th:arr
这种方式是不推荐的 ， 了解一下就好 。 下面是用 th:attr=“href=…” 来设置标签 href 属性的值：
1 | <a th:attr="href=@{https://www.google.com.hk}">谷歌一下你能知道的更多</a> |
th:*
上面 th:attr="href=@{http://www.baidu.com}" 语法显得臃肿甚至不简洁 ， 我们更推荐下面的这种语法：
1 | <a th:href="@{https://www.google.com.hk}">谷歌一下你能知道的更多</a> |
这样代码就简洁多了 ， 其中 th:* 中的 * 可以是 HTML5 支持的任意属性名称 ， 甚至这些属性名称可以是自定义的：
1 2 3 4 | <!-- <div item-id="1001">Welcome to BeiJing!</div> --> <div th:item-id="${user.id}">Welcome to BeiJing!</div> <div th:class='box'></div> <input th:value='123' /> |
th: * - *
如果想要同时为标签的多个不同属性设置相同的一个值 ， 可以使用 th:- 的语法：
1 | <img src="logo.png" th:alt-title="LOGO图片"> |
它相当于：
1 | <img src='logo.png' th:alt="LOGO图片" th:title="LOGO图片" /> |
th:attrappend & th:attrprepend
th:attrappend 和 th:attrprepend 可以将表达式的结果分别追加到指定的属性值之后和之前 。
1 2 3 4 | <!-- <button class="btn enable">购买</button> --> <button class="btn" th:attrappend="class=${outOfStock} ? ' enable' : ' disable'">购买</button> <!-- <button class="enable btn">购买</button> --> <button class="btn" th:attrprepend="class=${outOfStock} ? 'enable ' : 'disable '">购买</button> |
另外 ， Thymeleaf 还提供了两个常用的具体附加属性 th:classappend="…" 和 th:styleappend="" 。
它们分别用来代替 th:attrappend=“class=…” 和 th:attrappend=“style=…” 。
1 2 | <!-- <button class="btn enable">购买</button> --> <button class="btn" th:classappend="${outOfStock} ? ' enable' : ' disable'">购买</button> |
布尔属性
在 HTML 中有些属性是布尔属性 ， 布尔属性是指没有值的属性 ， 如 readonly 、 checked 、 selected 等 。 它们若存在那就意味着值为 true 。
1 2 3 4 5 6 7 8 9 10 | <input type="checkbox" name="rememberme" checked /> 记住我 <input type="radio" name="sex" value="male" checked> 男 <input type="radio" name="sex" value="female"> 女 <input type="text" name="appId" value="J123654" readonly> <select> <option selected>北京</option> <option>上海</option> <option>广州</option> <option>深圳</option> </select> |
Thymeleaf 也允许我们通过 th:* （这里的 * 表示任意的布尔属性） 来选择是否使用这些布尔属性 。
例如：
1 | <input type="checkbox" name="rememberme" ch:checked="${rememberme}" /> 记住我 |
正如你所见 ， 如果表达式的结果为 true ， 则自动勾选复选框 ， 若为 false ， 则不会自动勾选 。
遍历
遍历（迭代）的语法 th:each=“自定义的元素变量名称 : ${集合变量名称}” ：
1 2 3 4 5 6 | <div> <spn>你所在城市：</spn> <select name="mycity"> <option th:each="city : ${cities}" th:text="${city.name}"></option> </select> </div> |
th:each 提供了一个用于跟踪迭代的状态变量 ， 它包含以下几个属性：
| 属性 | 类型 | 描述 |
|---|---|---|
| index | int | 当前迭代的索引 ， 从 0 开始 |
| count | int | 当前迭代的计数 ， 从 1 开始 |
| size | int | 集合中元素的总个数 |
| current | int | 当前元素的对象 |
| even | boolean | 当前迭代的计数是否是偶数 |
| odd | boolean | 当前迭代的计数是否是奇数 |
| first | boolean | 当前迭代的计数是否是奇数 |
| last | boolean | 当前元素是否是集合的最后一个元素 |
状态变量的使用语法： th:each="自定义的元素变量名称, 自定义的状态变量名称 : ${集合变量名称}" ：
1 2 3 4 5 6 | <div> <spn>所在城市：</spn> <select name="mycity"> <option th:each="city, status : ${cities}" th:text="${city.name}" th:item-index="${status.count}"></option> </select> </div> |
不管什么时候 ， Thymeleaf 始终会为每个 th:each 创建一个状态变量 ， 默认的状态变量名称就是自定义的元素变量名称后面加 Stat 字符串组成：
1 2 3 4 5 6 | <div> <spn>所在城市：</spn> <select name="mycity"> <option th:each="city : ${cities}" th:text="${city.name}" th:item-index="${cityStat.count}"></option> </select> </div> |
条件判断
条件判断语句有三种 ， 分别是： th:if 、 th:unless 、 th:swith 。
th:if
当表达式的评估结果为真时则显示内容 ， 否则不显示：
1 | <a th:href="@{/user/order(uid=${user.id})}" th:if="${user != null}">我的订单</a> |
真假评估的依据：
- 当表达式的值不为 null 时
- 如果表达式的值是一个布尔类型 ， 且值为 true 评估为真 ， 否则为假；
- 如果表达式的值是一个数字类型 ， 且值为非 0 评估为真 ， 否则为假；
- 如果表达式的值是一个字符类型 ， 且值为非 0 评估为真 ， 否则为假；
- 如果表达式的值是一个字符串类型 ， 且值为非 “false” 、 “off” 、 “no” 评估为真 ， 否则为假；
- 如果表达式的值是一个字符串类型 ， 且值为非 “false” 、 “off” 、 “no” 评估为真 ， 否则为假；
- 当表达式的值为 null 时，评估为假。
因此上面的代码我们简写成：
1 | <a th:href="@{/user/order(uid=${user.id})}" th:if="${user}">我的订单</a> |
但是 ， 为了代码的可读性 ， 我们并不建议这样使用(一眼比较难看出，容易误导新手) 。
th:unless
th:unless 与 th:if 判断恰好相反 ， 当表达式的评估结果为假时则显示内容 ， 否则不显示：
1 | <a th:href="@{/user/order(uid=${user.id})}" th:unless="${user == null}">我的订单</a> |
th:swith
多路选择语句 ， 它需要搭配 th:case 来使用：
1 2 3 4 | <div th:switch="${user.role}"> <p th:case="admin">管理员</p> <p th:case="user">普通用户</p> </div> |
模板布局
在 WEB 应用开发中 ， 我们通常会将一些公共的代码片段如页眉 、 页脚 、 菜单等抽取出来放到一个或多个独立的文件里面 ， 其他模板文件可以通过标签轻松的将这些代码片段引用进来 ， 从而实现代码的复用性 。
在 Thymeleaf 中 ， 你可以使用 th:fragment 来定义一个公共的代码片段 ， 然后通过使用 th:insert 、 th:replace 、 th:include （Thymeleaf 3.0 开始不再推荐使用 ， 本文也将不再介绍它）属性可以实现将定义的公共代码片段引用到模板文件中 。
th:fragment
我们可以通过 th:fragment 来定义一段公用的代码片段：
templates/footer.html
1 | <div th:fragment="base">? 2017 fanlychie</div> |
th:insert
templates/welcome.html 文件中引用footer.html 中 base 代码片段的方式为：
1 | <div th:insert="~{footer :: base}"></div> |
其中 ， ~{ } 是可选的 ， 我们可以去掉这层的包裹：
1 | <div th:insert="footer :: base"></div> |
如果 footer.html 与 welcome.html 不在同级目录 ， 如 templates/commons/footer.html ：
1 | <div th:insert="@{commons/footer} :: base"></div> |
类选择器 、 ID选择器等
除了可以使用 th:fragment 来定义一段公用的代码片段外 ， 我们也可以使用类选择器 、 ID选择器等：
templates/footer.html
1 | <div id="base">? 2017 fanlychie</div> |
templates/welcome.html 文件中引用 footer.html 中 id=“base” 片段的方式为：
1 | <div th:insert="footer :: #base"></div> |
th:replace
跟 th:insert 相似的 ，th:replace 也可以用来引用公共的代码片段 。
不同的是 ， th:insert 是直接将代码片段插入到标签体内 ， 而 th:replace 则是用代码片段直接替换标签体内容 。
举个例子：
1 2 3 4 | <!-- <div><div id="base">? 2017 fanlychie</div></div> --> <div th:insert="footer :: base"></div> <!-- <div id="base">? 2017 fanlychie</div> --> <div th:replace="footer :: base"></div> |
th:fragment 参数使用
使用 th:fragment 来定义一个代码片段时 ， 它允许你指定一组参数 ， 语法：
1 2 3 4 5 6 | <font color='red'>th:fragment="fragmentname(arg1, arg2, ...)"</font> <div th:fragment="crumbs(parent, child)"> <span th:text="|${parent} > ${child}|"></span> </div> <!-- 用户中心 > 我的订单 --> <div th:replace="::crumbs('用户中心', '我的订单')"></div> |
th:assert
断言 ， 它可以同时指定多个表达式 ， 每个表达式的结果评估值必须为 true ， 否则它将会抛出一个异常 。 语法：th:assert=“expression1, expression2…” ：
1 | <div th:replace="::crumbs(${parentMenuName}, ${childMenuName})" th:assert="${!#strings.isEmpty(parentMenuName), !#strings.isEmpty(childMenuName)}"></div> |
定义局部变量
使用 th:with 属性可以定义局部变量：
1 2 3 | <p th:with="name='fanlychie'"> <span th:text="${name}"></span> </p> |
同时定义多个局部变量时 ， 用英文 , 号分隔开：
1 2 3 | <p th:with="name=${user.name},age={user.age}"> ...... </p> |
注释
下面介绍常见两种注释：
标准注释
语法： ， 注释的代码块会在引擎解析的时候抹去 。
单行注释：
1 | <!--/* <span>${message}</span> */--> |
多行注释：
1 2 3 4 5 6 | <!--/*--> <div th:switch="${user.role}"> <p th:case="admin">管理员</p> <p th:case="user">普通用户</p> </div> <!--*/--> |
内联表达式
内联表达式允许我们直接在 HTML 文本中使用标准表达式 ， 而不需要使用th:* 标签属性 。
[[…]]
[[]] 相当于 th:text ， 对含有 HTML 标签的内容自动进行字符转义 。
htmlContent = “Welcome to BeiJing!”
1 | <p>The message is : [[${htmlContent}]]</p> |
输出：
1 | The message is : <b>Welcome to BeiJing!</b> |
[(…)]
[()] 相当于 th:utext ， 对含有 HTML 标签的内容不进行字符转义 。
1 | <p>The message is : [(${htmlContent})]</p> |
输出：
The message is : Welcome to BeiJing!
th:inline
我们已经了解到 ， 使用 [[]] 和 [()] 语法可以直接在 HTML 文本中使用标准表达式 ， 如果想要使用更多高级的功能 ， 需要使用 th:inline 属性来激活 ， 它的取值如下：
| 值 | 描述 |
|---|---|
| none | 禁止使用内联语法，会直接输出 [[ ]] and[( )] |
| text | 文本内联 ， 可以使用 th:each 等高级语法 |
| css | 样式内联 ， 如: <`style th:inline="css"`> |
| javascript | 脚本内联 ， 如： <`style th:inline="javascript"`> |
none
1 2 | <!-- [[1, 2], [3, 4]] --> <p th:inline="none">[[1, 2], [3, 4]]</p> |
text
1 2 3 4 5 6 | <!-- 北京 上海 广州 深圳 --> <p th:inline="text"> [# th:each="city : ${cities}"] [(${city.name})] [/] </p> |
css
1 2 3 4 5 | <style th:inline="css"> body { background-color:[[${bgColor}]]; } </style> |
javascript
1 2 3 4 | <script th:inline="javascript"> var user = [[${user}]]; alert("用户名：" + user.name); </script> |
原文链接：
https://www.codercto.com/a/9497.html