Thymeleaf模板引擎教程(详细总结)

Thymeleaf 是一个服务器端 Java 模板引擎，能够处理 HTML 、 XML 、 CSS 、 JAVASCRIPT 等模板文件。
Thymeleaf 模板可以直接当作静态原型来使用，它主要目标是为开发者的开发工作流程带来优雅的自然
模板，也是 Java 服务器端 HTML5 开发的理想选择。

1. 创建模板文件

创建一个 HTML 模板文件 
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org"><head>
<title>Index Page</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /></head>
<body>
<p th:text="${message}">Welcome to BeiJing!</p>
</body>
</html>
通过 xmlns:th="http://www.thymeleaf.org" 引入 Thymeleaf 命名空间。 th:text 用于处理 p 标签
体的文本内容。该模板文件直接在任何浏览器中正确显示，浏览器会自动忽略它们不能理解的属性
th:text 。但这不是一个真正有效的 HTML5 文档，因为 HTML5 规范是不允许使用 th:* 这些非标准
属性的。我们可以切换到 Thymeleaf 的 data - th - * 语法，以此来替换 th:* 语法： 
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org"><head>
<title>Index Page</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<p data-th-text="${message}">Welcome to BeiJing!</p>
</body>
</html>
HTML5 规范是允许 data - * 这样自定义的属性的。 th:* 和 data - th - * 这两个符号是完全等效且可以互
换的。但为了简单直观和代码的紧凑性，本文采用 th:* 的表示形式。

2. 标准表达式语法

Thymeleaf 提供了非常丰富的标准表达式语法，总共有 8 大类：
简单表达式
字面值
文本操作
算术运算
布尔运算
比较和相等
条件运算
无操作符

2.1 简单表达式

2.1.1 ${…}

@GetMapping("/standard-expression-syntax/variables")
public String variables(ModelMap model, HttpSession session) {
model.put("now", new Date());
model.put("message", "Welcome to BeiJing!");
session.setAttribute("user", new User("fanlychie", "男", 24));
... ...
}
通过变量表达式 ${} 取出上下文环境中的 message 变量： 
<!-- Welcome to BeiJing! -->
<p th:text="${message}"></p>
它相当于： 
ctx.getVariable("message");

2.1.2 *{…}

变量表达式 ${} 是面向整个上下文的，而选择变量表达式 *{} 的上下文是父标签（ th:object ）所选
择的对象： 
<div th:object="${session.user}">
<p th:text="*{name}"></p>
<p th:text="*{sex}"></p>
<p th:text="*{age}"></p>
</div>
它相当于： 
<div>
<p th:text="${session.user.name}"></p>
<p th:text="${session.user.sex}"></p>
<p th:text="${session.user.age}"></p>
</div>
如果对象没有被选择，那么， *{} 和 ${} 表达式所达到的效果是完全相同的： 
<p th:text="*{session.user.name}"></p>
<p th:text="${session.user.name}"></p>

2.1.3 #{…}

消息表达式可用于国际化文字信息。首先我们来了解一下 i18n 资源文件的命名规则：
basename.properties
basename_language.properties
basename_language_country.properties
basename 是自定义的资源文件名称， language 和 country 必须是 Java 支持的语言和国家。
basename.properties 是缺省加载的资源文件，当客户端根据本地语言查找不到相关的资源文件时，
则使用该配置文件。
创建文件 src/main/resources/messages.properties 
welcome.message = 北京欢迎你！
创建文件 src/main/resources/messages_en_US.properties 
welcome.message = Welcome to BeiJing!
在 IntelliJ IDEA 编辑视图：
messages 是 Spring Boot 加载资源文件默认采用的名称（ basename ），如果你所使用的资源文件名
称不是以 messages 命名或所使用的资源文件不是在 src/main/resources 根目录，你可以通过
spring.messages.basename 属性来做具体的配置。如，资源文件 messages.properties 和
messages_en_US.properties 假设它们所在的目录位置是 src/main/resources/i18n 。
application.properties 配置示例： 
spring.messages.basename:i18n/messages
application.yml 配置示例： 
spring
messages
basename: i18n/messages
静态文本消息示例 
<!-- 北京欢迎你！ -->
<p th:text="#{welcom.message}"></p>
消息表达式 #{} 是不允许直接处理非静态的文本消息的，但是你可以在资源文件中通过使用占位符 {}
来处理非静态的文本消息：
messages.properties 配置示例：
welcome.user.message = {0}, 北京欢迎你！
messages_en_US.properties 配置示例：
welcome.user.message = {0}, Welcome to BeiJing!
非静态文本消息，以参数的形式传递变量的值： 
<!-- fanlychie, 北京欢迎你！ -->
<p th:text="#{welcome.user.message(${session.user.name})}"></p>

2.1.4 @{…}

链接表达式 @{} 是专门用来处理 URL 链接地址的。
绝对地址示例： 
<!-- https://fanlychie.github.io -->
<p th:text="@{https://fanlychie.github.io}"></p>
页面相对地址示例： 
<!-- commons/base.html -->
<p th:text="@{commons/base.html}"></p>
上下文相对地址（相对于当前的服务）示例： 
<!-- /css/mian.css -->
<p th:text="@{/css/mian.css}"></p>
服务器相对地址（相对于部署在同一个服务器中的不同服务）示例： 
<!-- /image/upload -->
<p th:text="@{~/image/upload}"></p>
参数使用示例： 
<!-- /css/mian.css?v=1.0 -->
<p th:text="@{/css/mian.css(v=1.0)}"></p>
<!-- /user/order?username=fanlychie -->
<p th:text="@{/user/order(username=${session.user.name})}"></p>
<!-- /user/order?username=fanlychie&status=PAIED -->
<p th:text="@{/user/order(username=${session.user.name},status='PAIED')}"></p>
<!-- /user/fanlychie/info -->
<p th:text="@{/user/{username}/info(username=${session.user.name})}"></p>

2.1.5 ~{…}

片段表达式 ~{} 可以用来引用一段公共的 HTML 代码片段。
在 Thymeleaf 模板文件中，你可以使用 th:fragment 属性来定义一段公共的代码片段，然后你可以通
过使用 th:insert 、 th:replace 、 th:include （ Thymeleaf 3.0 开始不再推荐使用，本文也将不再
介绍它）属性来将这些公共的代码片段引入到模板文件中来。
src/main/resources/templates/base.html ，通过 th:fragment 属性定义一段公共的代码片段：
<div id = "footer" th:fragment = "footerFragment" > © 2017 fanlychie </div>
src/main/resources/templates/index.html ，通过 th:insert 属性引用一段公共的代码片段：
<div th:insert = "~{base :: footerFragment}" ></div>
其中， ~{} 是可选的，我们可以去掉这层的包裹：
<div th:insert = "base :: footerFragment" ></div>
若 index.html 与 base.html 不在同级目录，如 templates/commons/base.html ：
<div th:insert = "~{commons/base :: footerFragment}" ></div>
使用 th:fragment 属性定义代码片段时，你还可以声明一组参数： 
<div th:fragment="crumbs(parent, child)">
<i th:text="${parent}"></i> <i th:text="${child}"></i>
</div>
<!--
<i>用户中心</i>
<i>我的订单</i>
-->
<div th:insert="::crumbs('用户中心', '我的订单')"></div>
此外，我们还可以通过类选择器、 ID 选择器等来引用公共的代码片段：
<div th:insert = "~{base :: #footer}" ></div>
除了 th:insert 属性 th:replace 也可以用来引用公共的代码片段。不同的是， th:insert 是直接将
代码片段插入到标签体内，而 th:replace 则是用代码片段直接替换标签体内容。 
<!--
<div>
<div id="footer">© 2017 fanlychie</div>
</div>
-->
<div th:insert="~{base :: footerFragment}"></div>
<!--
<div id="footer">© 2017 fanlychie</div>
-->
<div th:replace="~{base :: footerFragment}"></div>

2.1.6 内置对象

#ctx 示例： 
<!-- zh_CN -->
<p th:text="${#ctx.getLocale()}"></p>
<!-- Welcome to BeiJing! -->
<p th:text="${#ctx.getVariable('message')}"></p>
<!-- true -->
<p th:text="${#ctx.containsVariable('message')}"></p>
<!-- zh_CN -->
<p th:text="${#vars.getLocale()}"></p>
<!-- Welcome to BeiJing! -->
<p th:text="${#vars.getVariable('message')}"></p>
<!-- true -->
<p th:text="${#vars.containsVariable('message')}"></p>
#locale 示例： 
<!-- zh_CN -->
<p th:text="${#locale}"></p>
<!-- CN -->
<p th:text="${#locale.country}"></p>
<!-- 中国 -->
<p th:text="${#locale.displayCountry}"></p>
<!-- zh -->
<p th:text="${#locale.language}"></p>
<!-- 中文 -->
<p th:text="${#locale.displayLanguage}"></p>
<!-- 中文 (中国) -->
<p th:text="${#locale.displayName}"></p>
#request 示例： 
<!-- HTTP/1.1 -->
<p th:text="${#request.protocol}"></p>
<!-- http -->
<p th:text="${#request.scheme}"></p>
<!-- localhost -->
<p th:text="${#request.serverName}"></p>
<!-- 8080 -->
<p th:text="${#request.serverPort}"></p>
<!-- GET -->
<p th:text="${#request.method}"></p>
<!-- /standard-expression-syntax/variables -->
<p th:text="${#request.requestURI}"></p>
<!-- http://localhost:8080/standard-expression-syntax/variables -->
<p th:text="${#request.requestURL}"></p>
<!-- /standard-expression-syntax/variables -->
<p th:text="${#request.servletPath}"></p>
<!-- java.util.Collections$3@203646fe -->
<p th:text="${#request.parameterNames}"></p>
<!-- {q=[Ljava.lang.String;@3308c69f} -->
<p th:text="${#request.parameterMap}"></p>
<!-- q=expression -->
<p th:text="${#request.queryString}"></p>
注意，请求地址的 URL 参数直接通过 #request.x 是取不出来的，需要使用 param.x 语法来取出。
如， URL ： /standard - expression - syntax/variables?q=expression ，取出 q 参数的正确姿势：
<p th:text = "${param.q}" ></p>
#response 示例： 
<!-- 200 -->
<p th:text="${#response.status}"></p>
<!-- 8192 -->
<p th:text="${#response.bufferSize}"></p>
<!-- UTF-8 -->
<p th:text="${#response.characterEncoding}"></p>
<!-- text/html;charset=UTF-8 -->
<p th:text="${#response.contentType}"></p>
#session 示例： 
<!-- 2BCB2A0EACFF2D9D249D9799431B5127 -->
<p th:text="${#session.id}"></p>
<!-- 1499786693244 -->
<p th:text="${#session.lastAccessedTime}"></p>
<!-- fanlychie -->
<p th:text="${#session.getAttribute('user').name}"></p>
注意，放到会话里面的对象直接通过 #session.x 是取不出来的，需要使用 session.x 语法来取出。
如，取出会话里面的 user 对象的正确姿势：
<p th:text = "${session.user.name}" ></p>

2.1.7 工具类

<!-- false -->
<p th:text = "${#strings.isEmpty(message)}" >
</p>
<!-- 2017-07-12 00:37:25 -->
<p th:text = "${#dates.format(now, 'yyyy-MM-dd HH:mm:ss')}" ></p>

2.2 字面值

所谓字面值，首先它不是一个变量，它是一个具体的确切的值，通常这些值是比较简单的，例如：
18 、 'welcome' 等，它们没有名称，以至于我们只能用值来称呼它们，因此我们称其为字面值。
文字字面值是用单引号引起来的任何字符内容，如果字符内容里面含有单引号，则需要进行转义：

2.2.1

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

2.2.2 数字字面值

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

2.2.3 布尔字面值

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

2.2.4 空字面值

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

2.2.5 字面令牌

字面令牌（ Literal Tokens ）的内容只能含有（不能含有空格、特殊符号等）：
大写或小写的字母、中文等不含空格和特殊符号的文本
0 到 9 的数字
中括号
下划线
连字符（ - ）
点符号（ . ）
实际上，数字、布尔和空字面值都是字面令牌的特殊情况。字面令牌能够用来对标准表达式语法进行简
化，我们可以将包裹它的内容的单引号去掉：
<p th:text = "Welcome to BeiJing!" ></p>
它等效于：
<p th:text = "'Welcome to BeiJing!'" ></p>

2.3 文本操作

我们可以对文本内容进行两种常用的操作，它们分别为字符串连接和字符串替换。

2.3.1 字符串连接

不管是字面值还是表达式的结果，我们都可以使用 + 符号将它们连接起来：
<!-- Welcome to BeiJing! --> <p th:text = "'Welcome to ' + ${location} + '!'" ></p>

2.3.2 字面值替换

符号 || 可以用来将字面值和表达式包裹起来，这样就能方便的替换变量的值，而不需要使用 + 连接符：
<!-- Welcome to BeiJing! --> <p th:text = "|Welcome to ${location}!|" ></p>

2.4 算术运算

支持 + （加）、 - （减）、 * （乘）、 / （除）、 % （模）运算： 
<!-- 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>
<!-- 2 -->
<p th:text="${pagination.page + 1}"></p>
<!-- 2 -->
<p th:text="${pagination.page} + 1"></p>

2.5 布尔运算

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

2.6 比较和相等

支持 < （ 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>

2.7 条件运算

三元运算符： (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 = fanlychie@gmail.com\
<!-- 你还没有登录，请先登录 -->
<p th:text = "${token} ?: ' 你还没有登录，请先登录 '" ></p>
<!-- fanlychie@gmail.com -->
<p th:text = "${user.email} ?: ' 你还没有绑定邮箱 '" ></p>

2.8 无操作符

当模板运行在服务器端时， Thymeleaf 会解析 th:* 属性的具体值替换标签体的内容。无操作符（ _ ）
则允许你使用原型标签体的内容作为默认值：
<!-- 你还没有登录，请先登录 -->
<p th:text = "${token} ?: _" > 你还没有登录，请先登录 </p>

3. 使用文本

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

3.1 th:text

在标签体中展示表达式评估结果的文本内容：
<p th:text = "${message}" ></p>
使用外部化的文本内容：
<p th:text = "${message}" > Welcome to BeiJing! </p>
当它作为静态文件直接运行时，浏览器会自动忽略它不能识别的 th:text 属性，而显示 ` 标签体的文本
内容 Welcome to BeiJing!`
当它作为模板文件运行在服务器端时， th:text 属性的具体值将会替换 `` 标签体的文本内容。

3.2 th:utext

属性 th:utext 与 th:text 的区别在于：
th:text 默认会对含有 HTML 标签的内容进行字符转义；
th:utext （ Unescaped Text ）则不会对含有 HTML 标签的内容进行字符转义；
假设： message = "Welcome to BeiJing!" 。
使用 th:text 属性：
<p th:text = "${message}" ></p>
th:text 效果： Welcome to BeiJing!
使用 th:utext 属性：
<p th:utext = "${message}" ></p>
th:utext 效果： Welcome to BeiJing!

4. 设置属性值

在 Thymeleaf 模板文件中，你可以使用 th:* （或者使用 th:attr 属性）来设置任意的 HTML5 标签属
性的值。不仅如此，你还可以 th:* - * 来同时为多个不同的标签属性设置相同的一个值，甚至你可以使
用 th:attrappend 和 th:attrprepend 来追加新的值到现有的标签属性值中。

4.1 th:attr

这种方式是不被推荐的，了解一下就行。下面是用 th:attr="href=..." 来设置标签 href 属性的值：
<a th:attr = "href=@{https://www.google.com.hk}" > 谷歌一下你就知道 </a>

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

4.3 th:-

如果想要同时为标签的多个不同属性设置相同的一个值，可以使用 th:* - * 的语法：
<img src = "logo.png" th:alt-title = "LOGO 图片 " >
它相当于：
<img src = "logo.png" th:alt = "LOGO 图片 " th:title = "LOGO 图片 " >

4.4 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>
另外，还有两个常用的具体附加属性 th:classappend="..." 和 th:styleappend="" 。
它们分别用来代替 th:attrappend="class=..." 和 th:attrappend="style=..." 。
<!-- <button class="btn enable"> 购买 </button> -->
<button class = "btn" th:classappend = "${outOfStock} ? ' enable' : ' disable'" > 购买
</button>

4.5 布尔属性

在 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 ，则不会自动勾选。

5. 遍历

遍历（迭代）的语法 th:each=" 自定义的元素变量名称 : ${ 集合变量名称 }" ：
<div>
<spn> 你所在城市： </spn>
<select name = "mycity" >
<option th:each = "city : ${cities}" th:text = "${city.name}" ></option>
</select>
</div>
属性 th:each 提供了一个用于跟踪迭代的状态变量，它包含以下几个属性：
状态变量的使用语法： 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>

6. 条件判断

条件判断语句有三种，分别是： th:if 、 th:unless 、 th:swith 。

6.1 th:if

当表达式的评估结果为真时则显示内容，否则不显示：
<a th:href = "@{/user/order(uid=${user.id})}" th:if = "${user != null}" > 我的订单 </a>
真假评估的依据：
当表达式的值不为空（ null ）时
如果表达式的值是一个布尔类型，且值为 true 评估为真，否则为假
如果表达式的值是一个数字类型，且值为非 0 评估为真，否则为假
如果表达式的值是一个字符类型，且值为非 0 评估为真，否则为假
如果表达式的值是一个字符串类型，且值为非 "false" 、 "off" 、 "no" 评估为真，否则为
假
如果表达式的值不是一个 布尔 、 数字 、 字符 或 字符串 评估为真
当表达式的值为空（ null ）时，评估结果为假
因此，上面代码我们也可以简写成：
<a th:href = "@{/user/order(uid=${user.id})}" th:if = "${user}" > 我的订单 </a>
但是，为了代码的可读性，我们并不建议这样使用。

6.2 th:unless

th:unless 与 th:if 判断恰好相反，当表达式的评估结果为假时则显示内容，否则不显示：
<a th:href = "@{/user/order(uid=${user.id})}" th:unless = "${user == null}" > 我的订单
</a>

6.3 th:swith

多路选择语句，它需要搭配 th:case 来使用：
<div th:switch = "${user.role}" >
<p th:case = "admin" > 管理员 </p>
<p th:case = "user" > 普通用户 </p>
</div>

7. 定义局部变量

使用 th:with 属性可以定义局部变量：
<p th:with = "name='fanlychie'" > <span th:text = "${name}" ></span></p>
同时定义多个局部变量时，用英文 , 号分隔开：
<p th:with = "name=${user.name},age={user.age}" > ...... </p>

8. 注释

下面介绍常见的两种注释：

8.1 标准注释

语法： `` ，注释的代码块会在文件源代码中显示出来。

8.1.1 单行注释

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

8.1.2 多行注释

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

8.2 解析器级注释

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

8.2.1 单行注释：

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

8.2.2 多行注释

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

9. 内联表达式

内联表达式允许我们直接在 HTML 文本中使用标准表达式，而不需要使用 th:* 标签属性。

9.1 [[…]]

[[]] 相当于 th:text ，对含有 HTML 标签的内容自动进行字符转义。
<p> The message is : [[${htmlContent}]] </p>

9.2 [(…)]

[()] 相当于 th:utext ，对含有 HTML 标签的内容不进行字符转义。
<p> The message is : [(${htmlContent})] </p>

9.3 th:inline

我们已经了解到，使用 [[]] 和 [()] 语法可以直接在 HTML 文本中使用标准表达式，如果想要使用更
多高级的功能，需要使用 th:inline 属性来激活，它的取值如下

9.3.1 none

<!-- [[1, 2], [3, 4]] -->
<p th:inline = "none" > [[1, 2], [3, 4]] </p>

9.3.2 text

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

9.3.3 css

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

9.3.4 javascript

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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/diannao/57182.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Docker设置日志滚动

Docker设置日志滚动

问题描述 Docker 容器中的进程会将打印到控制台(console)的日志保存到容器的目录下&#xff0c;默认的 Docker 配置不带有日志的回滚。会在自己的容器目录下往同一个日志文件中不停写入&#xff0c;最后会导致磁盘空间占满的问题。 解决方案 方案一&#xff1a;全局范围内修…
阅读更多...
一文掌握Cephadm部署Ceph存储集群

一文掌握Cephadm部署Ceph存储集群

&#x1f4da; 博客主页&#xff1a; StevenZeng学堂 &#x1f389; 本文专栏: 一文读懂Kubernetes一文读懂Harbor云原生安全实战指南云原生存储实践指南 ❤️ 摘要&#xff1a;随着企业数据量的增长和存储需求的复杂化&#xff0c;Ceph因其高可扩展性和灵活性&#xff0c;能…
阅读更多...
网络安全的五大误区，你中招了吗？

网络安全的五大误区，你中招了吗？

在数字化时代&#xff0c;网络安全问题日益突出&#xff0c;许多人在使用网络过程中存在一些误区&#xff0c;导致个人信息泄露、财产损失等问题。本文将为您揭示网络安全的五大误区&#xff0c;帮助您提高安全防范意识。 误区一&#xff1a;使用复杂密码就一定安全 许多人认为…
阅读更多...
考研读研生存指南，注意事项

考研读研生存指南，注意事项

本视频课程&#xff0c;涉及考研读研的方方面面&#xff0c;从考研初试→复试面试→研究生生活→导师相处→论文专利写作混毕业&#xff0c;应有尽有。有了他&#xff0c;你的研究生生涯稳了。 读研考研注意事项&#xff0c;研究生生存指南。_哔哩哔哩_bilibili 一、考研初试注…
阅读更多...
临阵磨枪！这份软考中级集成案例分析答题万金油赶紧收藏

临阵磨枪！这份软考中级集成案例分析答题万金油赶紧收藏

在系统集成项目管理工程师案例分析科目的考试中&#xff0c;主要分为“计算题”和“分析题”两大类。 计算题主要围绕着进度管理和成本管理进行出题&#xff0c;比如挣值计算、网络图、关键路径等等&#xff0c;一般占据一道大题。 而分析题呢主要占三道大题&#xff0c;主要…
阅读更多...
前端开发 环境变量 process.env.NODE_ENV 是什么

前端开发 环境变量 process.env.NODE_ENV 是什么

背景&#xff1a; 前端开发过程中&#xff0c;解决Access跨域问题&#xff0c;使用跨域代理&#xff0c;注意这里是指前端的跨域代理&#xff0c;所以这里配置的只适用于开发环境。至于生产环境一般由后端配置跨域代理&#xff0c;一般使用ngnix解决生产环境的跨域代理。 一、…
阅读更多...
新款任天堂switch游戏机方案，支持4K60HZ投屏方案，显示器，手柄方案

新款任天堂switch游戏机方案，支持4K60HZ投屏方案，显示器，手柄方案

据传任天堂将推出新的一代的switch掌机&#xff0c;而新款掌机将支持4K60HZ投屏 都2402年了再做1080P确实有点不太象话了 4K60HZ相较于1080P能够提升很多游戏体验&#xff0c;这时不管是HDMI显示器或者是VR眼睛清晰度都会让人舒服很多。 不过新一代的任天堂似乎也在PD协议上…
阅读更多...
家政小程序搭建，数字化市场发展下的意义

家政小程序搭建，数字化市场发展下的意义

家政服务行业作为当下社会生活中不可或缺的行业&#xff0c;需求量在逐渐增加&#xff0c;行业发展也趋向多样化。 随着数字化的浪潮&#xff0c;家政行业逐渐向数字化、智能化升级发展&#xff0c;推动行业高质量发展&#xff0c;迎合现代化发展趋势&#xff0c;这一转型为行…
阅读更多...
网站分享丨UU在线工具

网站分享丨UU在线工具

在日常的工作、学习和生活中&#xff0c;我们常常会遇到各种各样需要借助工具来解决的问题。今天就给大家介绍一个功能强大、涵盖众多实用工具的在线平台 ——UU 在线工具。 一、丰富多样的工具分类 1.文档处理类&#xff1a; PDF 工具&#xff1a;提供了 PDF 转 Word、PDF 合…
阅读更多...
IDEA中文乱码�

IDEA中文乱码�

这篇文章网上到处都是&#xff0c;但我写作的初衷是为了更好地审视自己的作品&#xff0c;并通过不断的总结与反思来提升自我。 文章目录 前言原因分析解决方案一、设置字体为支持中文的字体二、设置字符编码为 UTF-8三、修改 IDEA 配置文件&#xff0c;让其支持中文编码第一种…
阅读更多...
资讯 | 财富通科技政务协同办公管理软件通过麒麟软件适配认证

资讯 | 财富通科技政务协同办公管理软件通过麒麟软件适配认证

2024年9月25日&#xff0c;财富通科技研发的政务协同办公管理软件成功通过中国国产操作系统麒麟软件的适配认证。本次认证是继公司区块链产品“基于区块链的企业及人员资质数字证书服务平台”认证以后得第二次认证。这一成就标志着财富通科技在推动国产软件生态建设方面迈出了坚…
阅读更多...
Java项目-基于springboot框架的广场舞团系统项目实战(附源码+文档)

Java项目-基于springboot框架的广场舞团系统项目实战(附源码+文档)

作者&#xff1a;计算机学长阿伟 开发技术&#xff1a;SpringBoot、SSM、Vue、MySQL、ElementUI等&#xff0c;“文末源码”。 开发运行环境 开发语言&#xff1a;Java数据库&#xff1a;MySQL技术&#xff1a;SpringBoot、Vue、Mybaits Plus、ELementUI工具&#xff1a;IDEA/…
阅读更多...
Debug-029-el-table实现自动滚动分批请求数据

Debug-029-el-table实现自动滚动分批请求数据

前情提要 最近做了一个小优化&#xff0c;还是关于展示大屏方面的。大屏中使用el-table展示列表数据&#xff0c;最初的方案是将数据全部返回&#xff0c;确实随着数据变多有性能问题&#xff0c;有时请求时间比较长。这里做的优化就是实现列表的滚动到距离底部一定高度时再次请…
阅读更多...
计算机网络基本命令

计算机网络基本命令

实验内容&#xff1a; 1. **ipconfig命令** - **用途**&#xff1a;显示和配置TCP/IP网络设置。 - **常用选项**&#xff1a; - ipconfig&#xff1a;显示所有网络适配器的IP地址、子网掩码、默认网关等信息。 - ipconfig /all&#xff1a;显示所有网络适配器…
阅读更多...
【网络安全】-vulnhub靶场-noob

【网络安全】-vulnhub靶场-noob

1.靶机下载&#xff1a; https://www.vulnhub.com/entry/noob-1,746/ 得到ova文件导入虚拟机&#xff0c;并打开虚拟机设置&#xff0c;将靶机-Noob与攻击机-kali的网络适配器都改成NAT仅主机模式&#xff0c;确保两台虚拟机在同一网段上。 2.靶机-Noob ip 判断 命令&#x…
阅读更多...
nvidia-smi命令输出的含义

nvidia-smi命令输出的含义

nvidia-smi命令输出的含义 基本输出信息![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/f3c26a8a882a4df7bb761d3cb4c92ea6.png)GPU 状态信息其他信息高级功能和命令动态显示gpu运行情况 nvidia-smi&#xff08;NVIDIA System Management Interface&#xff09;是一个…
阅读更多...
Hive优化:Hive的执行计划、分桶、MapJoin、数据倾斜

Hive优化:Hive的执行计划、分桶、MapJoin、数据倾斜

文章目录 1. hive的执行计划1.1 为什么使用EXPLAIN1.2 使用EXPLAIN的步骤1.3 EXPLAIN在什么场合使用 2. 分桶2.1 为什么要使用分桶 3. Map Join3.1 Map Join3.1.1 大小表关联3.1.2 不等连接 3.2 Bucket-MapJoin3.2.1 作用3.2.2 条件 3.3 SMB Join3.3.1 作用 4. 数据倾斜4.1 表连…
阅读更多...
GS-SLAM Dense Visual SLAM with 3D Gaussian Splatt 论文阅读

GS-SLAM Dense Visual SLAM with 3D Gaussian Splatt 论文阅读

项目主页 2024 CVPR (highlight) https://gs-slam.github.io/ 摘要 本文提出了一种基于3D Gaussian Splatting方法的视觉同步定位与地图构建方法。 与最近采用神经隐式表达的SLAM方法相比&#xff0c;本文的方法利用实时可微分泼溅渲染管道&#xff0c;显著加速了地图优化和…
阅读更多...
Lfsr32

Lfsr32

首先分析 Lfsr5 首先要理解什么是抽头点&#xff08;tap&#xff09;&#xff0c;注意到图中有两个触发器的输入为前级输出与q[0]的异或&#xff0c;这些位置被称为 tap position.通过观察上图&#xff0c;所谓抽头点指的就是第5个&#xff0c;第3个寄存器的输入经过了异或逻辑…
阅读更多...
ArkUI自定义TabBar组件

ArkUI自定义TabBar组件

在ArkUI中的Tabs&#xff0c;通过页签进行内容视图切换的容器组件&#xff0c;每个页签对应一个内容视图。其中内容是图TabContent作为Tabs的自组件&#xff0c;通过给TabContent设置tabBar属性来自定义导航栏样式。现在我们就根据UI设计的效果图来实现下图效果&#xff1a; 根…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023