Thymeleaf 标准表达式语法详解
文章目录
- 1. 表达式汇总
- $ {...} 变量表达式
- * {...} 选择表达式
- @{...} 处理 url 地址
- @{...} 携带参数
- 文本及其操作
1. 表达式汇总
<html xmlns:th="http://www.thymeleaf.org">
| 属性 | 描述 | 示例 |
|---|---|---|
| $ {…} | 变量表达式，可用于获取后台传过来的值 | < p th:text="${userName}">中国 |
| * {…} | 选择变量表达式 | |
| ＃{…} | 消息表达式 | |
| @ {…} | 链接⽹址表达式，用于替换网页中的 src、href 等的值 | th:href="@{/css/home.css}" |
| 〜{…} | ⽚段表达式，可以用于引用公共的目标片段 | < div th:insert="~{footer :: copy}"> |
$ {…} 变量表达式
变量表达式，用于访问容器上下文环境中的变量，功能同jstl中${}。
<p th:text="${name}">p>
<P>${name}P>
* {…} 选择表达式
选择表达式与变量表达式有一个重要的区别：选择表达式计算的是选定的对象，而不是整个环境变量映射。
也就是：只要是没有选择的对象，选择表达式与变量表达式的效果一样的。那什么是选择的对象呢？
是一个：th:object对象属性绑定的对象。
<div th:object="${person}">
<p th:text="*{name}">p>
<p th:text="*{id}">p>
div>
@{…} 处理 url 地址
Thymeleaf 的 @ {…} 表达式用于处理 web 应用中的 url 地址，可以是相对地址，也可以是绝对地址。
@{/} 斜杠开头表示相对整个应用根目录，"/" 表示 “/应用上下文路径”
假如页面当前浏览器地址为：http://localhost/thymeleaf/user/userHome， 其中 thymeleaf 表示应用上下文路径，user/userHome 为后台请求路径，则常用的写法如下：
- 1）@{userList} 相对当前路径结果为：http://localhost/thymeleaf/user/userList
- 2）@{./userList} 相对当前路径结果为：http://localhost/thymeleaf/user/userList
- 3）@{…/tiger/home} 相对当前路径结果为：http://localhost/thymeleaf/tiger/home
- 4）@{/tiger/home} 相对应用根目录结果为：http://localhost/thymeleaf/tiger/home
- 5）@{https://www.baidu.com/} 绝对路径结果为：https://www.baidu.com
- 6），@ 以 “/” 开头相对应用根目录，否则是相对当前路径。
<body>
<a th:href="@{userList}">1、@{userList}a>
<a th:href="@{./userList}">2、@{./userList}a>
<a th:href="@{../tiger/home}">3、@{../tiger/home}a>
<a th:href="@{/tiger/home}">4、@{/tiger/home}a>
<a th:href="@{https://www.baidu.com}">5、@{https://www.baidu.com}a>
body>
@{…} 携带参数
th:href 是⼀个修饰符属性，将表达式结果设置为标签 href 属性的值，请求地址中携带参数传往服务器是很常见的操作，常用操作如下：
<body>
<a th:href="@{userList(id=9527)}">1、@{userList(id=9527)}a>
<a th:href="@{userList(id=9527,name=华安)}">2、@{userList(id=9527,name=华安)}a>
<a th:href="@{userList(id=9527,name=${userName})}">3、@{userList(id=9527,name=${userName})}a>
body>
- 1）在 @{…}表达式末尾使用 “()” 设置参数；
- 2）多个参数时，使用 “,” 隔开
- 3）参数值可以使用表达式动态取值。
文本及其操作
⽂本⽂字指包含在单引号之间的字符串，它们可以包含任何字符，但如果字符串有空格时，必须使用单引号" ’ "包含。
<body>
<p th:text="China">中国p>
<p class="css1 css2" th:class="'css1 css2'">样式p>
<p th:text="'Big China'">中国p>
<p th:text="${info}">infop>
<p th:text="'small smile'+',very good.'">浅浅的微笑p>
body>
字符串追加
⽆论是字符串⽂本常量，还是通过变量表达式或消息表达式计算的结果，都可以使⽤ “+” 运算符轻松地追加⽂本。
<span th:text="'The name of the user is ' + ${user.name}">
数字字⾯量
<body>
<p th:text="80">8p>
<p th:text="8+8">8 + 8p>
<p th:text="8+8+' Love '+9+9">8 + 8+' Love '+9+9p>
<p th:text="8+8+' Love '+(9+9)">8 + 8+' Love '+(9+9)p>
<p th:text="100-${age}">p>
body>
布尔字⾯量
布尔字⾯量包含 true 和 false
<body>
<p th:text="true">布尔p>
<p th:text="true and false">true and truep>
<p th:if="${isMarry}">已结婚p>
<p th:if="${age}>18">已成年p>
<p th:if="${age}<18">未成年p>
body>
NULL 字⾯量
<body>
<p th:text="null">show nullp>
<p th:text="${id}">idp>
<p th:if="${id} eq null">id 值为 nullp>
<p th:text="${name}">为空p>
<p th:if="${name} == ''">name 为空p>
body>
算术运算符
Thyme Leaf 标准表达式⽀持算术运算：+， - ，*，/(除)，％(取余)
<body>
<canvas style="background-color: #999999" th:width="100" th:height="${age} + 15">
您的浏览器不支持 Canvas
canvas>
<p th:text="15 * 4">值为 60 p>
<p th:text="15 * 4-100/10">值为 50 p>
<p th:text="100 % 8">值为 4p>
body>
⽐较/逻辑运算符
表达式中的值可以与 >，<，>= ，<= ，== ，！= 符号进⾏⽐较。 ⼀个更简单的替代⽅案是使⽤这些运算符的⽂本别名：gt(>)，lt(<)，ge(>=)，le(<=)，eq(==)，neq(！=)。
逻辑运算符：and(与)、or(或)、！(非)，not(非)
<body>
<p th:if="5>3">5 大于 3p>
<p th:if="5 >4">5 大于 4p>
<p th:if="10>=8 and 7 !=8">10大于等于8，且 7 不等于 8 p>
<p th:if="!false">!falsep>
<p th:if="not(false)">not(false)p>
body>
三元运算符
Thymeleaf 中的三元运算与 Java 以及 JavaScript 中基本一致，如 A>B?X:Y，在 X、Y 中可以继续嵌套，只是 Thymeleaf 中需要使用括号包含起来，否则报错。
<body>
<p th:text="7>5?'7大':'5大'">三元运算符p>
<p th:text="${age}!=null?${age}:'age等于 null'">p>
<p th:text="${age}!=null?(${age}>=18?'成年':'未成年'):'age等于 null'">p>
<p th:text="${age2}!=null?${age2}:'age2等于 null'">p>
<p th:class="${isMarry}?'css2'">已婚p>
<p th:text="!${isMarry}?'css2'">已婚p>
body>