（1）内联表达式

有些情况下更喜欢将表达式直接写入到 HTML 文本中。
内联表达式：<p>Hello, [[${stu.name}]]</p>
或者这样写：<p>Hello, <span th:text="${stu.name}"></span></p>

内联表达式用法
◼ [[…]] 等价于 th:text，结果被HTML转义
◼ [(…)] 等价于 th:utext，结果不执行任何HTML转义

“[[”、"]]"、"[("、")]" 连在一起写，不能有空格

  • 后台代码 
@RequestMapping("/th")
    public String index(Model model) {
   
        model.addAttribute("msg", "Love you <b>中国</b>！");
        return "th/index";
    }
  • 前端代码 
<body>
        <p>hello, [[${msg}]]</p>
        <p>hello, [(${msg})]</p>
    </body>
  • 运行结果

禁用内联

◼ 实际应用中想输出 [[…]] 或 [(…)]
◼ th:inline = "none" 来禁用内联

<body>
	<p th:inline = "none" >hello, [[${msg}]]</p>
	<p th:inline = "none" >hello, [(${msg})]</p>
</body>

运行结果：

内联 JS

◼ JS 无法获取服务端返回的变量，通过内联就可以获取。
◼ 在 <script> 标签中添加 th:inline ="javascript" 来启用内联 JS。
◼ JS 内联表达式常用：[[${xx}]]
注：内联JS只能用在HTML文件内部的JS代码，不能识别引入的外部JS里面的内联表达式。

  • 控制器代码 
@RequestMapping("/edit")
    public String edit( Model model){
   
        Student s=new Student(2019001,"小明");
        model.addAttribute("stu",s);
        model.addAttribute("msg", "Love you <b>中国</b>！");
        return "th/form";
    }
  • 前端代码 
<body>
    <script th:inline="javascript"> var id = [[${
     stu.id}]] ; var name = [[${
     stu.name}]] ; var msg = [[${
     msg}]] ; //var msg = [(${msg})] //会报错 console.log(id, name, msg); </script>
</body>
  • 运行结果

内联 CSS

◼ 在 <style > 标签添加th:inline="css"开启内联 CSS。
◼ CSS 内联表达式常用：[(${xx})]

与内联 JS 一样，内联 CSS 同样只能在 HTML 内嵌的 <style>标签中进行使用不能在外部导入的 CSS 文件中进行使用。

  • 控制器代码 
@RequestMapping("/edit")
    public String edit( Model model){
   
        model.addAttribute("width","200px");
        model.addAttribute("bg","#f6f6f6");
        return "th/form";
    }
  • 前端代码 
<body>
    <style th:inline="css"> p {
      width: [(${
     width})] ; background-color: [(${
     bg})] ; } </style>
    <p th:text="${stu.id}">学号</p>
    <p th:text="${stu.name}">姓名</p>
</body>
  • 运行结果