Thymeleaf使用技巧

1.依赖

html添加命名空间

1
<html lang="en" xmlns:th="http://www.thymeleaf.org">

maven 依赖

1
2
3
4
5
<!-- SpringBoot集成thymeleaf模板 -->
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

js 中使用 th

1
2
3
const  user = /*[[${user}]]*/{};
const  user1 = '[[${user}]]';

user:是一个对象
user1:是字符串

html中使用

1
2
3
4
<!-- 前 -->
th:onload="loadImage(this,[[@{/one/bm_file_info/imagebase/}+${item.fileId}]])"
<!-- 后 -->
onload="loadImage(this,"\/one\/bm_file_info\/imagebase\/648727315840372736")"

thymeleaf结合vue

  • th:@click 绑定单击事件，要：方法左右添加| 例： th:@click=”| add() |”
  • thymeleaf赋值给vue的v-on。th:v-on:click=”|jump(‘${name}’)|”，使用|包围click的内容，里面有对应的vue method，method的入参可以使用thymeleaf传递进去。
1
2
3
4
5
<!-- 方法中参数可为 实体类属性 -->
 <div th:@click="|chooseAddr('${addr.address}')|"></div>

<!-- 通过单击事件 给属性赋值 -->
<li>th:@click="|order.payType=1|" </li>