本文详细介绍了Thymeleaf的高级用法，包括内联的文本、脚本和样式，以及禁用内联的用法。同时讲解了Thymeleaf内置的基本对象，如#request和#session，用于获取请求参数和会话信息，以及内嵌变量和工具对象的使用，帮助开发者更便捷地在模板中处理数据。
第5章 Thymeleaf 模板引擎
5.1 Thymeleaf 入门
5.2 Thymeleaf 表达式
5.3 Thymeleaf 表达式的语法
5.4 Thymeleaf 的高级用法
5.5 Thymeleaf 页面布局
5.4 Thymeleaf 的高级用法
5.4.1 内联
虽然通过 Thymeleaf 中的标签属性已经几乎满足了开发中的所有需求，但是有些情况下需要在 CSS 或 JS 中访问后台返回的数据。
Thymeleaf 提供了 th:inline="text"、th:inline="javascript"、th:inline="css"、th:inline="none" 标签，使用[[...]]内联表达式的方式在 HTML、JavaScript、CSS 代码块中轻松访问 model 对象数据。
内联属性：th:inline
内联表达式：[[...]]
1、文本内联
Thymeleaf 内联表达式用[[...]]或[(...)]语法来表达。
先在父级标签定义 th:inline=“text”，然后在标签内使用[[...]]或[(...)]表达式来操作数据对象。
文本内联比 th:text 的代码更简洁。
示例：
inline.html
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>内联</title>
</head>
<body>
<h1>Thymeleaf 模板引擎</h1>
<div>
<h3>内联</h3>
<div th:inline="text">
<p>Hello, [[${userName}]] !</p>
<br/>
</div>
</div>
以上代码等价于：
<div>
<h3>不使用内联</h3>
<div>
<p th:text="'Hello, ' + ${userName} + ' !'"></p>
<br/>
</div>
</div>
</body>
</html>
（1）th:inline="text"表示使用文本内联方式。
（2）任何父标签都可以加上 th:inline 属性。
（3）[[...]]等价于 th:text 结果将被 HTML 转义，[(...)]等价于 th:utext 结果不会被 HTML 转义。
@RequestMapping("/inline")
public String inline(ModelMap map) {
map.addAttribute("userName", "admin");
return "inline";
}
启动项目后，在浏览器中输入地址 http://localhost:8080/inline， 则会出现如图所示结果。
拓展：
th:text 和 th:utext 的区别？
（1）th:text 的使用：
<div th:text="'<h1>Hello World！</h1>'" >Hello</div>`会被转义`，HTML代码： “<div><h1>Hello World！</h1></div>”，页面上显示结果为：”<h1>Hello World！</h1>“
（2）th:utext 的使用：
最低0.47元/天 解锁文章
扫一扫
404
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
