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

ゝ一世哀愁。 2023-05-29 13:17 7阅读 0赞

### 文章目录 ###

*   *  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>

**运行结果：**  
![在这里插入图片描述][20191108142126329.png]

**说明：**  
第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：

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

运行结果：  
![在这里插入图片描述][20191107105336117.png]

解析后的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 如下（部分代码）：

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

## 2、字符串连接、拼接 ##

字符串连接有两种方式 ：

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

**示例1**  
html 代码：

变量：[[${hello}]]
    
    
    <div th:text="'哈哈，'+${hello}+'，'+${name}+'！'" ></div>
    
    
    <div th:text="|哈哈，${hello}，${name}！|" ></div>

运行结果：  
![在这里插入图片描述][20191106174029761.png]  
解析后的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>

解析后的代码：

## 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：

运行结果：  
![在这里插入图片描述][20191106152724628.png]

解析后的代码：

说明：

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

**示例2：**

运行结果：  
![在这里插入图片描述][20191106152151101.png]

解析后的代码：

## 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>

运行结果：  
![在这里插入图片描述][2019110615252220.png]

解析后的代码：

多个参数时，用逗号分割

<h3> 在 url 中实现参数传递 </h3>
    
    <a href="/show?id=12&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 代码片段：**

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>

运行结果：  
![在这里插入图片描述][20191106152215607.png]

<!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>

运行结果：  
![在这里插入图片描述][2019110615223537.png]

解析后的代码：

<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"` ：

注意：

由于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>

运行结果：  
![在这里插入图片描述][20191107104307889.png]

解析后的代码：

## 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>

运行结果：  
![在这里插入图片描述][20191107135537526.png]

解析后的代码：

<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：<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：<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，删除当前标签。

运行结果：  
![在这里插入图片描述][20191107140111382.png]

解析后的代码：

<h3> th:remove 支持条件表达式 </h3>
    <div >
    		
    	表达式1：<div id="hello">你好11</div>
    	表达式2：<div id="hello">你好22</div>
    	
    	
    	表达式3：<div></div>
    </div>

## 9、th:with 定义局部变量 ##

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

thymeleaf - html：

解析后的代码：

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

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

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

thymeleaf - html：

解析后的代码：

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

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

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

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

thymeleaf - html：

解析后的代码：

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

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

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

thymeleaf - html：

解析后的代码：

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

说明：  
myDream 复用了 cityName2 的值。

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

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

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

如下代码：

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` 就简单了，如下：

### 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>
    
    	
      <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>

运行结果：  
![在这里插入图片描述][20191107151341327.png]

解析后的代码：

<!DOCTYPE html>
    <html>
    <head>
    <title>Main页面</title>
    
    	
      <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 多条件判断，使用 `&&`、`||` ###

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

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

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

[20191108142126329.png]: https://img-blog.csdnimg.cn/20191108142126329.png
[20191107105336117.png]: https://img-blog.csdnimg.cn/20191107105336117.png
[20191106174029761.png]: https://img-blog.csdnimg.cn/20191106174029761.png
[20191106152724628.png]: https://img-blog.csdnimg.cn/20191106152724628.png
[20191106152151101.png]: https://img-blog.csdnimg.cn/20191106152151101.png
[2019110615252220.png]: https://img-blog.csdnimg.cn/2019110615252220.png
[20191106152215607.png]: https://img-blog.csdnimg.cn/20191106152215607.png
[2019110615223537.png]: https://img-blog.csdnimg.cn/2019110615223537.png
[20191107104307889.png]: https://img-blog.csdnimg.cn/20191107104307889.png
[20191107135537526.png]: https://img-blog.csdnimg.cn/20191107135537526.png
[20191107140111382.png]: https://img-blog.csdnimg.cn/20191107140111382.png
[20191107151341327.png]: https://img-blog.csdnimg.cn/20191107151341327.png