thymeleaf 语法——th:text默认值、字符串连接、th:attr、th:href 传参、th:include传参、th:inline 内联、th:each循环、th:with、th:if

文章目录

1、表达式
- 1.1、简单表达式
- 1.2、三元运算、条件表达式：
- 1.3、默认表达式
- 1.4、综合使用，属性值的 if - else
2、字符串连接、拼接
3、th:attr 的使用
4、th:href URL链接中传参
5、th:insert 、th:replace、th:include 代码片段引入时传参
6、th:inline 内联
- 7.1、th:inline="text" 文本内联
- 7.2、th:inline="javascript" 脚本内联
- 7.3、th:inline="none" 禁止内联
7、th:each 循环
8、th:remove 删除模板片段
9、th:with 定义局部变量
- 9.1、th:with 定义一个局部变量
- 9.2、th:with 定义的局部变量有是作用范围的
- 9.3、th:with 一次性定义多个变量
- 9.4、th:with 定义的变量可以复用
10、th:block 空标签，标签本身不显示
- 10.1、同时控制相连两个标签是否显示
- 10.2、循环同级标签
- 10.3、用于占位符
11、th:if 条件判断
- 11.1、th:if 多条件判断，使用 `&&`、`||`
- 11.2、if elseif else 即 th:switch th:case

1、表达式

1.1、简单表达式

${...} 变量表达式
*{...} 选择变量表达式
#{...} 消息表达式
@{...} 链接url表达式

1.2、三元运算、条件表达式：

a? b:c   # 如果a为true，则输出b，否则输入c。     相当于 (if  else)
a? b     # 如果a为true，则输出b，否则输入'' 。   相当于 a? b:''

示例：

Controller ：

@RequestMapping("/thymeleaf")
public String thymeleaf(ModelMap map) {map.put("name", "zhangsan");    return "/grammar/thymeleaf";
}

html：

<h3> 条件表达式语法</h3>
<div >1. <span th:text="${name}"></span ><br>2. <span th:text="${name} ? ${name}+'学习好':'李四体育好 '"></span ><br>3. <span th:text="${name} ? ${name}+'学习好' "></span ><br>4. <span th:text="${name2} ? '李四体育好 '"></span ><br>
</div>

运行结果：

说明：
第2个表达式： name不为空时，即是true，则输出第一个值 zhangsan学习好 。
第3个表达式： name不为空时，即是true，则输出第一个值 zhangsan学习好 。
第4个表达式： name2不存在，即是false，则输出 ' '，即空。
从第2与第4 可以看出 a? b 相当于 a? b:'' 。

解析后的 html 代码：

<h3> 条件表达式语法</h3>
<div >1. <span>zhangsan</span ><br>2. <span>zhangsan学习好</span ><br>3. <span>zhangsan学习好</span ><br>4. <span></span ><br>
</div>

1.3、默认表达式

当我们取一个值，可能为空时，我们可以提前设置一个默认值。

语法：
?: b 相当于 ${a} ? ${a}:b

如果 a不为空时，输出a的值，否则输入b的值。

示例：

Controller ：

@RequestMapping("/thymeleaf")
public String thymeleaf(ModelMap map) {map.put("name", "zhangsan");    return "/grammar/thymeleaf";
}

html：

<h3> th:text 默认值</h3>
<div ><div th:text="${name ?: '李四'}"></div ><div th:text="${name2 ?: '李四'}"></div >
</div>

说明：
已经设置了name 为 zhangsan，则第一个表达式，输出zhangsan 。
第2个表达式，name2不存在，为空，则输入默认值李四。

运行结果：

解析后的html 代码：

<h3> th:text 默认值</h3>
<div ><div>zhangsan</div ><div>李四</div >
</div>

1.4、综合使用，属性值的 if - else

html 静态页面如下：

<li> <a href="javascript:void(0)" > <span> 菜单AAAA</span>  </a> </li>
<li> <a href="/elements.html" class="multitabs" > <span> 菜单BBBB</span>  </a> </li>

改造说明： items 是一个内含多个 item对象的集合， item 有url、icon、text 等属性值。
当 url 为空时，href 值设为空方法，即 javascript:void(0) ，没有 class 属性；
当 url 有值时，href 设为对应的值，并且增加 class="multitabs" 属性值。

使用 thymeleaf 如下（部分代码）：

<li  th:each="item,stat : ${items}" ><a th:href="${item.url==''} ? 'javascript:void(0)':${item.url}" th:class="${item.url !=''}? 'multitabs'"><span th:text="${item.text}" ></span></a>
<li>

说明：使用条件表达式的方法实现的 if-else 条件输出。

2、字符串连接、拼接

字符串连接有两种方式：

通过 ' ' 和 + 拼接字符串；
| | 拼接字符串（推荐）；

示例1
html 代码：

变量：[[${hello}]]<!-- 通过 '' 和 + 拼接字符串 -->
<div th:text="'哈哈，'+${hello}+'，'+${name}+'！'" ></div><!-- 通过 | | 拼接字符串（推荐） -->
<div th:text="|哈哈，${hello}，${name}！|" ></div>

运行结果：

解析后的html 代码：

变量：hello world<!-- 通过 '' 和 + 拼接字符串 -->
<div >哈哈，hello world，张三！</div><!-- 通过 | | 拼接字符串（推荐） -->
<div >哈哈，hello world，张三！</div>

示例2：

<!-- 通过 '' 和 + 拼接字符串 -->
<a href="javascript:void(0)" th:onclick=" 'javascript:permission_audit('+ ${id} +') '">通过</a><!-- 通过 | | 拼接字符串（推荐） -->
<a href="javascript:void(0)" th:onclick="|javascript:permission_audit(${id})|">通过</a>

解析后的代码：

<a href="javascript:void(0)" onclick="javascript:permission_audit(12) ">通过</a>
<a href="javascript:void(0)" onclick="javascript:permission_audit(12)">通过</a>

3、th:attr 的使用

th:attr 的用处就是把数据以属性值的保存起来。

多个属性时，请逗号（,）的方式分割。格式如下：

th:attr="attr1=${value1}, attr2=${value2}"

说明：
th:attr 标签定义多个属性的使用方式已经过时了，不推荐使用。推荐的方式：

attr1="${value1}"  attr2="${value2}"

示例1：

@RequestMapping("/thymeleaf")
public String thymeleaf(ModelMap map) {map.put("cityName", "北京");map.put("cityId", "00001");map.put("regionId", "010");map.put("title", "这是一张图片哦");map.put("logo", "风景图");return "/grammar/thymeleaf";
}

html：

<h3> th:attr </h3><div id="cityBtn" class="btn" th:attr="data-cityId=${cityId}, data-regionId=${regionId}" th:text="${cityName}" >上海<span class="fa fa-angle-down"></span>
</div>

运行结果：

解析后的代码：

<h3> th:attr </h3><div id="cityBtn" class="btn" data-cityId="00001" data-regionId="010" >北京</div>

说明：

可以看到数据以标签属性的方式保存起来。

示例2：

<img  src="../../images/ccc.jpg" th:attr="src=@{/images/ccc.jpg},title=${title},alt=${logo},myName=${logo}" />

运行结果：

解析后的代码：

<img  src="/images/ccc.jpg" title="这是一张图片哦" alt="风景图" myName="风景图" />

4、th:href URL链接中传参

url 的参数写在括号内，多个参数时，用逗号分割。

示例：

Controller ：

@RequestMapping("/thymeleaf")
public String thymeleaf(ModelMap map) {  map.put("id", "12");map.put("name", "zhangsan");return "/grammar/thymeleaf";
}

html：

<h3> 在 th:href url 中实现参数传递 </h3><a th:href="@{/show( id=${id } ,name=${name} )}">相对路径-传参</a>

运行结果：

解析后的代码：

多个参数时，用逗号分割

<h3> 在 url 中实现参数传递 </h3><a href="/show?id=12&amp;name=zhangsan">相对路径-传参</a>

5、th:insert 、th:replace、th:include 代码片段引入时传参

Controller ：

@RequestMapping("/contentPage2")
public String contentPage2(ModelMap map) {map.put("varA", "aaaaaa");map.put("varB", "bbbbbbb");return "/fragments/contentPage2";
}

html：
/fragments/pagefrag3.html 代码片段：

<div th:fragment="frag (varC,varD)"><p th:text="${varC} + ' - ' + ${varD}">...</p>
</div>

contentPage2.html ：

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head><meta charset="UTF-8"><title>thymleaf th:include 传参</title>
</head>
<body><div th:include="fragments/pagefrag3::frag(${varA},${varB})">...</div><div th:include="fragments/pagefrag3::frag(varC=${varA},varD=${varB})">...</div>
</body>
</html>

运行结果：

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>thymleaf th:include 传参 </title>
</head>
<body><div><p>aaaaaa - bbbbbbb</p>
</div><div><p>bbbbbbb - aaaaaa</p>
</div></body>
</html>

对于 th:include="fragments/pagefrag3::frag(varC=${varA},varD=${varB}) 指定参数名的方式时，

代码片段中也有对应的参数名，否则报错；
代码片段中是按照参数名的顺序来的，无关主页面与代码片段指定的参数名是否一致。

6、th:inline 内联

虽然通过Thymeleaf标准⽅⾔中的标签属性已经⼏乎满⾜了我们开发中的
所有需求，但是有些情况下我们更喜欢将表达式直接写⼊我们的HTML⽂
本。例如，我们喜欢这样写代码：

<p>Hello, [[${session.user.name}]]!</p>

⽽不喜欢这样写代码：

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

[[...]] 或 [(...)] 中的表达式被认为是在Thymeleaf中内联的表达式。

thymeleaf 在html标签内可通过th标签加${}表达式访问model里的对象数据。

但如果不想通过th标签，而是简单地访问model对象数据，或是想在 javascript代码块里访问model中的数据，则要使用内联的方法。

th:inline 内联的取值有三种：text、javascript、 none

使用方式：

[[${ 变量名 }]]

7.1、th:inline=“text” 文本内联

Controller

@RequestMapping("/thymeleaf")
public String thymeleaf(ModelMap map) {        map.put("id", "12");map.put("name", "zhangsan");        return "/grammar/thymeleaf";
}

html：

<p>Hello, [[${name}]]!</p>

运行结果：

解析后的代码：

<h3>th:inline 内联</h3>
<p>Hello, zhangsan!</p>

约等于 th:tex 标签：

<p>Hello, <span th:text="${name}">Sebastian</span>!</p>

解析事的代码是

<p>Hello, <span>zhangsan</span>!</p>

7.2、th:inline=“javascript” 脚本内联

如果想在javascript中获取变量值时，则需要加上th:inline="javascript" ：

<script type="text/javascript" th:inline="javascript">   var max =  [[${name}]];console.log(max);
</script>

注意：

由于thymeleaf 的版本不同，有时变量外层要加引号（单引号，双引号都可以），即var max = "[[${name}]]"

7.3、th:inline=“none” 禁止内联

因为内联的表达式是双层中括号 [[${ 变量名 }]] ，当使用数组、二维数组时，就会与thymleaf 语法冲突，如果还想使用数据，此时必须禁止内联 h:inline="none"，才使用常规的 javascript语法。

<input type="text" id="maxSumOfDateInYear" value="aaaaaaaaa"/><script type="text/javascript" th:inline="none">var max = document.getElementById("maxSumOfDateInYear").value;var data = [["2012-05-07", 6], ["2012-04-16", 4]];console.log(max);console.log(data);
</script>

此处，data表示二维数组，如果不禁止内联时，模板解析会出错的，所有要加上`th:inline=“none”，禁止使用 thymeleaf 语法，使用常规的 javascript 。

7、th:each 循环

在 th:each 迭代的同时，我们也可以获取迭代的状态对象 stat ：

stat 对象包含以下属性：

index，从0开始的角标
count，元素的个数，从1开始
size，总元素个数
current，当前遍历到的元素
even/odd，返回是否为奇偶，boolean值
first/last，返回是否为第一或最后，boolean值

controller

@RequestMapping("/thymeleaf")
public String thymeleaf(ModelMap map) {        List list=new ArrayList();list.add(new User(10,"张三",20,"北京"));list.add(new User(25,"李四",34,"上海"));list.add(new User(28,"王五",56,"深圳"));list.add(new User(32,"赵六",66,"广州"));map.put("userList", list);return "/grammar/thymeleaf";
}class User{        private int id;private String name;private int age;private String address;  public User(int id, String name, int age, String address) {super();this.id = id;this.name = name;this.age = age;this.address = address;}// setter/getter 省略
}

html ：

<h3> th:each 循环</h3>
<div th:each="user,stat  : ${userList}"><span th:text="${stat.index}">index</span><span th:text="${user.name}">name</span><span th:text="${user.age}">age</span><span th:text="${user.address}">address</span><span th:if="${stat.even}">奇行</span><span th:if="${stat.odd}">偶行</span><span th:if="${stat.first}">第一行</span><span th:if="${stat.last}">最后一行</span>
</div>

运行结果：

解析后的代码：

<h3> th:each 循环</h3>
h3> th:each 循环</h3>
<div><span>0</span><span>张三</span><span>20</span><span>北京</span>    <span>偶行</span><span>第一行</span>
</div>
<div><span>1</span><span>李四</span><span>34</span><span>上海</span><span>奇行</span>    </div>
<div><span>2</span><span>王五</span><span>56</span><span>深圳</span>    <span>偶行</span>
</div>
<div><span>3</span><span>赵六</span><span>66</span><span>广州</span><span>奇行</span>    <span>最后一行</span>
</div>

8、th:remove 删除模板片段

th:remove 的值如下：

all ：删除包含标签和所有的孩子；
body ：不包含标记删除,但删除其所有的孩子；
tag ：包含标记的删除,但不删除它的孩子；
all-but-first ：删除所有包含标签的孩子,除了第一个；
none ：什么也不做。这个值是有用的动态评估。

示例1

Controller

@RequestMapping("/thymeleaf")
public String thymeleaf(ModelMap map) {  map.put("id", "12"); return "/grammar/thymeleaf";
}

html：

<h3> th:remove </h3>
<div >all:<div th:remove="all"><div id="hello">你好11</div></div>body:<div th:remove="body"><div id="hello">你好11</div></div>tag:<div th:remove="tag"><div id="hello">你好11</div></div>tag:<div th:remove="none"><div id="hello">你好11</div></div></div>

运行结果：

解析后的代码：

<h3> th:remove </h3>
<div >all:body:<div></div>tag:<div id="hello">你好33</div>tag:<div><div id="hello">你好44</div></div></div>

示例2、th:remove 支持条件表达式

<h3> th:remove 支持条件表达式 </h3>
<div ><!-- 表达式1与表达式2效果 一样的 -->  表达式1：<div th:remove="${id}==12 ? tag"><div id="hello">你好11</div></div>表达式2：<div th:remove="${id}==12 ? tag:none"><div id="hello">你好22</div></div><!-- 表达式3: id==12时，返回body，即删除子标签的内容-->表达式3：<div th:remove="${id}==12 ? body:tag"><div id="hello">你好33</div></div>
</div>

说明：
表达式1与表达式2效果是一样的。id=12时，返回tag，否则，返回’’ ，即为none 。
表达式3：id==12 时，返回body，即删除子标签的内容；id不等于12时，返回tag，删除当前标签。

运行结果：

解析后的代码：

<h3> th:remove 支持条件表达式 </h3>
<div ><!-- 表达式1与表达式2效果 一样的 -->  表达式1：<div id="hello">你好11</div>表达式2：<div id="hello">你好22</div><!-- 表达式3: id==12时，返回body，即删除子标签的内容-->表达式3：<div></div>
</div>

9、th:with 定义局部变量

9.1、th:with 定义一个局部变量

thymeleaf - html：

<div th:with="hello2=${name}+',你好' "><div id="hello"  th:text="${hello2}"></div>
</div>

解析后的代码：

<div><div id="hello">zhangsan,你好</div>
</div>

9.2、th:with 定义的局部变量有是作用范围的

th:with 定义的局部变量有作用范围的，作用域限定于子标签以内。

thymeleaf - html：

<div th:with="hello2=${name}+',你好' "><div id="hello"  th:text="${hello2}"></div>
</div>
<div id="hello"  th:text="${hello2}"></div>

解析后的代码：

<div><div id="hello">zhangsan,你好</div>
</div>
<div id="hello"></div>

说明：
hello2 在作用域外使用，没有任何输出，为空的。

9.3、th:with 一次性定义多个变量

一次性定义多个变量，用逗号分割。

thymeleaf - html：

<div th:with="hello2=${name}+',你好',cityName2=${cityName}+',真美丽' "><div  th:text="${hello2}"></div><div  th:text="${cityName2}"></div>
</div>

解析后的代码：

<div><div>zhangsan,你好</div><div>北京,真美丽</div>
</div>

9.4、th:with 定义的变量可以复用

h:with 定义的变量可以复用，但必须在作用域内。

thymeleaf - html：

<div th:with="cityName2=${cityName}+',真美丽' , myDream=${cityName2}+',我真的好想去' "><div  th:text="${myDream}"></div>
</div>

解析后的代码：

<div><div>北京,真美丽,我真的好想去</div>
</div>

说明：
myDream 复用了 cityName2 的值。

10、th:block 空标签，标签本身不显示

<th:block> </th:block>是 Thymeleaf 提供的唯一的一个Thymeleaf块级元素，其特殊性在于Thymeleaf模板引擎在处理 <th:block> 的时候会删掉它本身，标签本身不显示，而保留其内容，应用场景主要有如下两个：

10.1、同时控制相连两个标签是否显示

如下代码：

<div id="div1" th:if="...">
</div>
<div id="div2" th:if="...">
</div>

div1 和 div2 中两个if条件一样时，可以改成如下写法：

<th:block th:if="..."><div id="div1"></div><div id="div2"></div>
</th:block>

示例：

thymeleaf - html：

<th:block th:if="${id}==12"><div id="div1">张三的新增权限</div><div id="div2">张三的删除权限</div>
</th:block>

解析后的代码：

 <div id="div1">张三的新增权限</div><div id="div2">张三的删除权限</div>

10.2、循环同级标签

比如在表格中需要使用 th:each 循环两个 tr，在不知道 th:block 标签时，可能会用 th:each 配合 th:if 使用，但是使用 th:block 就简单了，如下：

<table><th:block th:each="..."><tr>...</tr><tr>...</tr></th:block>
</table>

10.3、用于占位符

Controller ：

 @RequestMapping("/main")
public String main(ModelMap map) {return "/fragments5/main";
}

模板代码片段 base.html ：

<head th:fragment="common_header(title,links)">
<title th:replace="${title}">The awesome application</title><!-- 共用的css和js --><link rel="stylesheet" type="text/css" media="all" th:href="@{/css/awesomeapp.css}"><link rel="shortcut icon" th:href="@{/images/favicon.ico}"><script type="text/javascript" th:src="@{/sh/scripts/codebase.js}"></script><!-- 额外添加的链接 --><th:block th:replace="${links}" /></head>

主页面 main.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="/fragments5/base :: common_header(~{::title},~{::link})"><title>Main页面</title><link rel="stylesheet" th:href="@{/css/bootstrap.min.css}"><link rel="stylesheet" th:href="@{/themes/smoothness/jquery-ui.css}">
</head>
<body><h1>th:replace</h1></body>
</html>

运行结果：

解析后的代码：

<!DOCTYPE html>
<html>
<head>
<title>Main页面</title><!-- 共用的css和js --><link rel="stylesheet" type="text/css" media="all" href="/css/awesomeapp.css"><link rel="shortcut icon" href="/images/favicon.ico"><script type="text/javascript" src="/sh/scripts/codebase.js"></script><!-- 额外添加的链接 --><link rel="stylesheet" href="/css/bootstrap.min.css"><link rel="stylesheet" href="/themes/smoothness/jquery-ui.css"></head>
<body><h1>th:replace</h1></body>
</html>

具体参考文章：
https://blog.csdn.net/xiaojin21cen/article/details/102919572

11、th:if 条件判断

11.1、th:if 多条件判断，使用 `&&`、`||`

<ul class="nav nav-second-level"><li th:each="cmenu : ${menu.children}"><a class="J_menuItem"  th:if="${cmenu.text!= '角色管理' && cmenu.text!= '系统菜单'}"href="graph_echarts.html" th:text="${cmenu.text}"th:href="${cmenu.attributes.url}">系统管理</a></li>
</ul>

11.2、if elseif else 即 th:switch th:case

如果要实现if elseif else 判断表达式，在thymeleaf要使用 th:switch 代替，th:case="*" 表示默认，需写在最后

<div class="top" th:switch="${area}"><div class="logo" th:case="'a'"><img th:src="@{/static/images/logo-A.png}"></div><div class="logo" th:case="'b'"><img th:src="@{/static/images/logo-B.png}"></div><div class="logo" th:case="*"><img th:src="@{/static/images/logo-c.png}"></div>
</div>

注意：th:case 所在的标签必须在 th:switch 所在标签的里面。