Thymeleaf 入门基础

最新推荐文章于 2024-08-23 06:12:23 发布

不像程序猿的程序员

最新推荐文章于 2024-08-23 06:12:23 发布

阅读量475

点赞数 1

分类专栏： SpringBoot 框架文章标签： html java web css

原文链接：https://www.codercto.com/a/9497.html

版权

SpringBoot 框架专栏收录该内容

15 篇文章 0 订阅

订阅专栏

一，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页面呢？

<!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:

<!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变量的值。

<span th:text='${message}'></span>

内置对象
跟 JSP 相像的， Thymeleaf 也为我们提供了一些内置的对象变量，它们都是以 # 开头表示：

语法	描述
#ctx	上下文对象
#vars	上下文变量
#locale	上下文区域变量
#request	HttpServletRequest 对象
#response	HttpServletResponse 对象
#session	HttpSession 对象
#servletContext	ServletContext 对象

举个例子：

<!-- 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工具类

举个例子：

<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>

*{…}

使用 * { } 表达式时，如果没有选择对象，那么， * { } 和 ${} 表达式表达的效果是一样的。

<p th:text='*{user.name}'></p>
<p th:text='${user.name}'></P>

* { } 表达式的上下文是父标签（ th:object ）所选择的对象，而 ${} 表达式是面向整个上下文的，这是 * { } 和 ${} 表达式语法的一个重要的区别。

<div th:object='${user}'>
	name:<p th:text='*{name}'></p>
	age:<p th:text='*{age}'></p>
	sex:<p th:text='*{sex}'></p>
</div>

它相当于：

<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

举个例子：

<p th:text='#{welcome.message}'></p>

处理非静态消息

#{ } 表达式是不能直接处理非静态消息的，我们可以在资源文件中使用占位符 { } 来处理非静态消息。

/src/main/resources/i18n/messages.properties

welcome.user={0}，欢迎来到北京！

使用时，通过消息的键值以参数的形式来传递变量。

<p th:text='#{welcome.user(${user.name})}'></p>

@{…}

在WEB应用开发里面URL的链接地址是非常常见的，@{ } 表达式就是专门用来处理URL链接的：

<!-- /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>

绝对地址：

<!-- https://blog.csdn.net/qq_44538738 -->
<a th:href='@{https://blog.csdn.net/qq_44538738}'></a>

页面相对地址(相对于当前服务)：

<!-- commons/util.js -->
<script th:src="@{commons/util.js}"></script>

服务器相对地址(相对于部署在同一个服务器中的不同服务)：

<!-- /image/upload -->
<img th:src="@{~/image/upload}"/>

~{…}

当需要引用某个模板文件的公共的 HTML 代码片段时，可以使用 ~{ } 语法：

语法	描述
~{templatename :: selector}	selector 可以是 th:fragment 指定的名称，如 ~{footer :: base} 。也可以是其他选择器，如类选择器、 ID选择器等；
~{templatename}	引用整个模板文件的代码片段；
~{::selector}	相当于 ~{this :: selector} ，表示引用当前模板定义的代码片段；

具体参考模板布局章节。

字面值

什么是字面值？首先它不是一个变量，它是一个具体的确切的值，通常这些值是比较简单的，例如： 18 、 ‘welcome’ 等，它们没有名称，以至于我们只能用值来称呼它们，因此我们称其为字面值。

文字字面值

文字字面值是用单引号引起来的任何字符内容，如果字符内容里面含有单引号，则需要进行转义：

<!-- Welcome to BeiJing! -->
<p th:text="'Welcome to BeiJing!'"></p>
<!-- 'Welcome to BeiJing!' -->
<p th:text="'\'Welcome to BeiJing!\''"></p>

数字字面值

<!-- 2017 -->
<p th:text="2017"></p>
<!-- 2018 -->
<p th:text="2017 + 1"></p>

布尔字面值

<!-- false -->
<p th:text="1 > 2"></p>
<!-- 否 -->
<p th:text="1 > 2 ? '是' : '否'"></p>

空字面值

<!-- false -->
<p th:text="${user == null}"></p>

字面令牌

字面令牌（Literal Tokens）的内容只能含有（不能含有空格、特殊符号等）：

大小写字母
0 - 9 的数字
中括号
下划线
连字符（-）
点（.）
中文（官方文档未提及）
其它

实际上，数字、布尔和空字面值都是字面令牌的特殊情况。
字面令牌能够用来对标准表达式语法进行简化（可以将包裹它的单引号去掉）：

<p th:text="BeiJing"></p>
它等效于：
<p th:text="'BeiJing'"></p>

文本操作

文本操作包含字符连接和替换的操作。

字符串连接

不管是字面值还是表达式的结果，我们都可以使用 + 符号将它们连接起来：

<!-- Welcome to BeiJing! -->
<p th:text="'Welcome to ' + ${province.name} + '!'"></p>

字面值替换
|| 符号可以用来将字面值和表达式包裹起来，这样就能方便的替换变量的值，而不需要使用 + 连接符：

<!-- Welcome to BeiJing! -->
<p th:text="|Welcome to ${province.name}!|"></p>

算术运算

支持+ （加）、 - （减）、 * （乘）、 / （除）、 % （模）运算：

<!-- 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 （非）运算：

<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 ）：

<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)

<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 = 2681737638@qq.com

<!-- 你还没有登录<span class="fuhao">，</span>请先登录 -->
<p th:text="${token} ?: '你还没有登录<span class="fuhao">，</span>请先登录'"></p>
<!-- fanlychie@gmail.com -->
<p th:text="${user.email} ?: '你还没有绑定邮箱'"></p>

无操作符：

当模板运行在服务器端时，无论如何 Thymeleaf 都会用 th:* 属性的具体值替换标签体的内容。

无操作符（ _ ）则允许使用原型标签体的内容作为默认值：

<!-- 你还没有登录<span class="fuhao">，</span>请先登录 -->
<p th:text="${token} ?: _">你还没有登录<span class="fuhao">，</span>请先登录</p>

使用文本

了解了标准表达式的语法之后，接下来介绍如何正确的使用它们。

标准表达式通常需要搭配 th:* 属性来使用，这样 Thymeleaf 引擎才能正确的解析出表达式的结果。

首先介绍两个最基础的 th:* 属性，它们分别是： th:text 和 th:utext ，这两个属性都是用于处理文本内容。

th:text

在标签中显示表达式的值的文本内容：

<span th:text="${message}"></span>

使用外部化文本内容：

<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 例子：

<span th:text="${message}"></span>

th:text 结果：

<b>Welcome to BeiJing!</b>

th:utext 例子：

<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 属性的值：

<a th:attr="href=@{https://www.google.com.hk}">谷歌一下你能知道的更多</a>

th:* 上面 th:attr="href=@{http://www.baidu.com}" 语法显得臃肿甚至不简洁，我们更推荐下面的这种语法：

<a th:href="@{https://www.google.com.hk}">谷歌一下你能知道的更多</a>

这样代码就简洁多了，其中 th:* 中的 * 可以是 HTML5 支持的任意属性名称，甚至这些属性名称可以是自定义的：

<!-- <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:- 的语法：

<img src="logo.png" th:alt-title="LOGO图片">

它相当于：

<img src='logo.png' th:alt="LOGO图片" th:title="LOGO图片" />

th:attrappend & th:attrprepend

th:attrappend 和 th:attrprepend 可以将表达式的结果分别追加到指定的属性值之后和之前。

<!-- <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=…” 。

<!-- <button class="btn enable">购买</button> -->
<button class="btn" th:classappend="${outOfStock} ? ' enable' : ' disable'">购买</button>

布尔属性

在 HTML 中有些属性是布尔属性，布尔属性是指没有值的属性，如 readonly 、 checked 、 selected 等。它们若存在那就意味着值为 true 。

<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:* （这里的 * 表示任意的布尔属性）来选择是否使用这些布尔属性。
例如：

<input type="checkbox" name="rememberme" ch:checked="${rememberme}" /> 记住我

正如你所见，如果表达式的结果为 true ，则自动勾选复选框，若为 false ，则不会自动勾选。

遍历

遍历（迭代）的语法 th:each=“自定义的元素变量名称 : ${集合变量名称}” ：

<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="自定义的元素变量名称, 自定义的状态变量名称 : ${集合变量名称}" ：

<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 字符串组成：

<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

当表达式的评估结果为真时则显示内容，否则不显示：

<a th:href="@{/user/order(uid=${user.id})}" th:if="${user != null}">我的订单</a>

真假评估的依据：

当表达式的值不为 null 时
1. 如果表达式的值是一个布尔类型，且值为 true 评估为真，否则为假；
2. 如果表达式的值是一个数字类型，且值为非 0 评估为真，否则为假；
3. 如果表达式的值是一个字符类型，且值为非 0 评估为真，否则为假；
4. 如果表达式的值是一个字符串类型，且值为非 “false” 、 “off” 、 “no” 评估为真，否则为假；
5. 如果表达式的值是一个字符串类型，且值为非 “false” 、 “off” 、 “no” 评估为真，否则为假；
当表达式的值为 null 时，评估为假。

因此上面的代码我们简写成：

<a th:href="@{/user/order(uid=${user.id})}" th:if="${user}">我的订单</a>

但是，为了代码的可读性，我们并不建议这样使用(一眼比较难看出，容易误导新手) 。

th:unless

th:unless 与 th:if 判断恰好相反，当表达式的评估结果为假时则显示内容，否则不显示：

<a th:href="@{/user/order(uid=${user.id})}" th:unless="${user == null}">我的订单</a>

th:swith

多路选择语句，它需要搭配 th:case 来使用：

<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

<div th:fragment="base">© 2017 fanlychie</div>

th:insert

templates/welcome.html 文件中引用footer.html 中 base 代码片段的方式为：

<div th:insert="~{footer :: base}"></div>

其中， ~{ } 是可选的，我们可以去掉这层的包裹：

<div th:insert="footer :: base"></div>

如果 footer.html 与 welcome.html 不在同级目录，如 templates/commons/footer.html ：

<div th:insert="@{commons/footer} :: base"></div>

类选择器、 ID选择器等

除了可以使用 th:fragment 来定义一段公用的代码片段外，我们也可以使用类选择器、 ID选择器等：

templates/footer.html

<div id="base">© 2017 fanlychie</div>

templates/welcome.html 文件中引用 footer.html 中 id=“base” 片段的方式为：

<div th:insert="footer :: #base"></div>

th:replace

跟 th:insert 相似的，th:replace 也可以用来引用公共的代码片段。
不同的是， th:insert 是直接将代码片段插入到标签体内，而 th:replace 则是用代码片段直接替换标签体内容。

举个例子：

<!-- <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 来定义一个代码片段时，它允许你指定一组参数，语法：

<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…” ：

<div th:replace="::crumbs(${parentMenuName}, ${childMenuName})" th:assert="${!#strings.isEmpty(parentMenuName), !#strings.isEmpty(childMenuName)}"></div>

定义局部变量

使用 th:with 属性可以定义局部变量：

<p th:with="name='fanlychie'">
 <span th:text="${name}"></span>
</p>

同时定义多个局部变量时，用英文 , 号分隔开：

<p th:with="name=${user.name},age={user.age}">
 ......
</p>

注释

下面介绍常见两种注释：

标准注释

语法： <!-- … —> ，注释的代码块会在文件源代码中显示出来。

单行注释

<!-- <span>${message}</span> --->

多行注释

<!--
<div th:switch="${user.role}">
 <p th:case="admin">管理员</p>
 <p th:case="user">普通用户</p>
</div>
--->

解析器级注释

语法：  ，注释的代码块会在引擎解析的时候抹去。

单行注释：

<!--/* <span>${message}</span> */-->

多行注释：

<!--/*-->
<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!”

<p>The message is : [[${htmlContent}]]</p>

输出：

The message is : <b>Welcome to BeiJing!</b>

[(…)]

[()] 相当于 th:utext ，对含有 HTML 标签的内容不进行字符转义。

<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], [3, 4]] -->
<p th:inline="none">[[1, 2], [3, 4]]</p>

text

<!-- 北京 上海 广州 深圳 -->
<p th:inline="text">
 [# th:each="city : ${cities}"]
 [(${city.name})]
 [/]
</p>

css

<style th:inline="css"> 
 body {
 background-color:[[${bgColor}]];
 }
</style>

javascript

<script th:inline="javascript"> 
 var user = [[${user}]];
 alert("用户名：" + user.name);
</script>

原文链接：

https://www.codercto.com/a/9497.html

不像程序猿的程序员

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Thymeleaf 入门基础

一，Thymeleaf 介绍Thymeleaf 是一个服务器端 Java 模板引擎，类似于 FreeMarker 、 Velocity 等模板。它是Java 服务器端 HTML5 开发的理想选择。并且能够很好的和 Spring Boot 集成。Thymeleaf 的主要目标是为程序员的开发工作流程带来优雅的自然模板，它可以作为静态原型来使用，这对前后端分离的开...
复制链接

扫一扫

专栏目录