5.4 Thymeleaf 的高级用法-蒲公英云

5.4 Thymeleaf 的高级用法

第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 的使用：