5.4 Thymeleaf 的高级用法

太过爱你忘了你带给我的痛 2023-10-07 23:44 25阅读 0赞

> ## 第5章 Thymeleaf 模板引擎 ##
> 
> 5.1 [Thymeleaf 入门][Thymeleaf]  
> 5.2 [Thymeleaf 表达式][Thymeleaf 1]  
> 5.3 [Thymeleaf 表达式的语法][Thymeleaf 2]  
> 5.4 [Thymeleaf 的高级用法][Thymeleaf 3]  
> 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， 则会出现如图所示结果。

![文本内联][90245ff23edf4a2f9b24485cba3665ad.png]

> **拓展：**
> 
> 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>“
> 
> ![th属性中text][th_text]
> 
> （2）th:utext 的使用：

[Thymeleaf]: https://blog.csdn.net/Shipley_Leo/article/details/128925151
[Thymeleaf 1]: https://blog.csdn.net/Shipley_Leo/article/details/128975299
[Thymeleaf 2]: https://blog.csdn.net/Shipley_Leo/article/details/128985934
[Thymeleaf 3]: https://blog.csdn.net/Shipley_Leo/article/details/128996786
[90245ff23edf4a2f9b24485cba3665ad.png]: https://img-blog.csdnimg.cn/90245ff23edf4a2f9b24485cba3665ad.png
[th_text]: https://img-blog.csdnimg.cn/c5fc2b8cd136452082b903c60a3bf3a5.png