thymeleaf 内联表达式

「爱情、让人受尽委屈。」 2022-11-25 13:18 112阅读 0赞

--------------------

### thymeleaf 内联表达式 ###

### \*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\* ###

**内联表达式**

**\*\*\*\*\*\*\*\*\*\*\*\*\*\***

**文本内联**

**th:text ==> \[\[ .. \]\]**

<p>Hello, [[${session.user.name}]]!</p>
    <p>Hello, <span th:text="${session.user.name}">Sebastian</span>!</p>

**th:utext ==> \[( .. )\]**

<p>The message is "[(${msg})]"</p>
    <p>The message is <span th:utext="${msg}"></span> </p>

**禁用内联**

<p th:inline="none">A double array looks like this: [[1, 2, 3], [4, 5]]!</p>

**\*\*\*\*\*\*\*\*\*\*\*\*\*\***

**javascript 内联**

**\*\*\*\*\*\*\*\*\*\*\*\*\*\***

**css 内联**

### \*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\* ###

**示例**

**\*\*\*\*\*\*\*\*\*\*\*\*\*\***

**controller 层**

**HelloController**

@RestController
    public class HelloController {
    
        @RequestMapping("/hello")
        public ModelAndView hello(ModelAndView mv){
            String info="hello 瓜田李下";
            String value="海贼王";
    
            String className="background-color";
            String color="green";
    
            mv.addObject("info",info);
            mv.addObject("value",value);
            mv.addObject("className",className);
            mv.addObject("color",color);
    
            mv.setViewName("index");
            return mv;
        }
    }

**\*\*\*\*\*\*\*\*\*\*\*\*\*\***

**前端页面**

**index.html**

<!DOCTYPE html>
    <html lang="en" xmlns="http://www.w3.org/1999/xhtml"
          xmlns:th="http://www.thymeleaf.org" xmlns:sec="https://www.thymeleaf.org/thymeleaf-extras-springsecurity4">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="/jquery/jquery-3.5.1.min.js"></script>
    </head>
    <script th:inline="javascript">
        $(function () {
            const value=[[${value}]];
    
            $("#name").val(value);
        })
    </script>
    
    <style th:inline="css">
        .color {
            [[${className}]]: [[${color}]];
        }
    </style>
    <body>
    <div th:align="center" style="color: purple">
        <strong>
            使用内联：<span style="color: coral">[[${info}]]</span><br>
            禁用内联：<span style="color: coral" th:inline="none">[[${info}]]</span><br><br>
        </strong>
    
        name：<input type="text" id="name" name="value"><br><br>
    
        <span class="color">瓜田李下</span>
    </div>
    </body>
    </html>

### \*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\* ###

**使用测试**

![20200809175814335.png][]

[20200809175814335.png]: /images/20221124/55ff5c6a82c747e8a83af753731e7f33.png