thymeleaf 内联表达式

最新推荐文章于 2023-10-01 16:57:32 发布

o_瓜田李下_o

最新推荐文章于 2023-10-01 16:57:32 发布

阅读量635

点赞数 2

分类专栏： thymeleaf

本文链接：https://blog.csdn.net/weixin_43931625/article/details/107895702

版权

thymeleaf 专栏收录该内容

25 篇文章 3 订阅

订阅专栏

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 内联

<script th:inline="javascript">
    ...
    var username = [[${session.user.name}]];
    ...
</script>

**************

css 内联

<style th:inline="css">
    .[[${classname}]] {
      text-align: [[${align}]];
    }
</style>

*******************

示例

**************

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>