文章11 | 阅读 6095 | 点赞0
<html xmlns:th="http://www.thymeleaf.org">
编号 | 属性 | 描述 | 示例 |
---|---|---|---|
1 | $ {...} | 变量表达式,可用于获取后台传过来的值 | <p th:text="${userName}">中国</p> |
2 | * {...} | 选择变量表达式 | |
3 | #{...} | 消息表达式 | |
4 | @ {...} | 链接⽹址表达式,用于替换网页中的 src、href 等的值 | th:href="@{/css/home.css}" |
5 | 〜{...} | ⽚段表达式,可以用于引用公共的目标片段 | <div th:insert="~{footer :: copy}"></div> |
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)<link type="text/css" rel="stylesheet" th:href="@{/css/home.css}">,@ 以 "/" 开头相对应用根目录,否则是相对当前路径。
<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>
<!--下面如果没用单引号 th:text="Big China",则页面直接报错-->
<p th:text="'Big China'">中国</p>
<!--后台使用:model.addAttribute("info", "Love you 中国"); 传值有空格也是没有问题的-->
<p th:text="${info}">info</p>
<!--后台传值字符串有空格是可以的,可以使用 + 进行字符串连接-->
<p th:text="'small smile'+',very good.'">浅浅的微笑</p>
</body>
字符串追加
⽆论是字符串⽂本常量,还是通过变量表达式或消息表达式计算的结果,都可以使⽤ "+" 运算符轻松地追加⽂本。
<span th:text="'The name of the user is ' + ${user.name}">
<body>
<!--直接用 80 替换-->
<p th:text="80">8</p>
<!--计算结果为 16 在进行替换-->
<p th:text="8+8">8 + 8</p>
<!--前面 8+8 计算结果为 16,然后字符串拼接上 Love,后面的 9+9也会被当做字符串拼接-->
<p th:text="8+8+' Love '+9+9">8 + 8+' Love '+9+9</p>
<!--前面 8+8 计算结果为 16,后面的 9+9因为有括号,所以也会计算结果,最后拼接 Love 字符串-->
<p th:text="8+8+' Love '+(9+9)">8 + 8+' Love '+(9+9)</p>
<!--后台传了一个:model.addAttribute("age", 35);取得结果后在进行计算-->
<p th:text="100-${age}"></p>
</body>
布尔字⾯量包含 true 和 false:
<body>
<!--直接用 true 替换了标签体内容-->
<p th:text="true">布尔</p>
<!--true、false 是布尔值,and 是布尔运行符,and(与),or(或),not(非)、!(非)-->
<p th:text="true and false">true and true</p>
<!--后台使用 model.addAttribute("isMarry", true); 传了值-->
<!--th:if 表达式为 true,则显示标签内容,否则不显示-->
<p th:if="${isMarry}">已结婚</p>
<!--后台传值:model.addAttribute("age", 35);-->
<!--比较运算符:>,<,> =,<=(gt,lt,ge,le)-->
<p th:if="${age}>18">已成年</p>
<p th:if="${age}<18">未成年</p>
</body>
<body>
<p th:text="null">show null</p>
<!--后台传了个值:model.addAttribute("id", null);-->
<!--当 id 的值为 null 时,整个标签不显示-->
<p th:text="${id}">id</p>
<!--相等运算符:==,!=(eq,ne)-->
<p th:if="${id} eq null">id 值为 null</p>
<!--后台传了个值:model.addAttribute("name", "");-->
<!--当 name 为空时,整个标签不再显示-->
<p th:text="${name}">为空</p>
<!--判断结果为 true-->
<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">值为 4</p>
</body>
表达式中的值可以与 >,<,>= ,<= ,==,!= 符号进⾏⽐较。 ⼀个更简单的替代⽅案是使⽤这些运算符的⽂本别名:gt(>),lt(<),ge(>=),le(<=),eq(==),neq(!=)。
逻辑运算符:and(与)、or(或)、!(非),not(非)
<body>
<p th:if="5>3">5 大于 3</p>
<p th:if="5 >4">5 大于 4</p>
<p th:if="10>=8 and 7 !=8">10大于等于8,且 7 不等于 8 </p>
<p th:if="!false">!false</p>
<p th:if="not(false)">not(false)</p>
</body>
Thymeleaf 中的三元运算与 Java 以及 JavaScript 中基本一致,如 A>B?X:Y,在 X、Y 中可以继续嵌套,只是 Thymeleaf 中需要使用括号包含起来,否则报错。
<body>
<!--7大于5时,输出 7大,否则输出 5大-->
<p th:text="7>5?'7大':'5大'">三元运算符</p>
<!--后台控制器输出了:model.addAttribute("age", 35);-->
<!--因为 ${xx}取值时,如果值为null,则默认整个标签不再显示-->
<p th:text="${age}!=null?${age}:'age等于 null'"></p>
<!--这里使用嵌套判断,嵌套的部分要使用括号-->
<p th:text="${age}!=null?(${age}>=18?'成年':'未成年'):'age等于 null'"></p>
<!--变量 age2 后台并没有输出,所以 age2 不存在,此时 age2 ==null-->
<p th:text="${age2}!=null?${age2}:'age2等于 null'"></p>
<!--后台输出了:model.addAttribute("isMarry", true);-->
<!--A>B?X:Y,这里的 Y 部分是省略的,此时如果 A>B 返回 false,则整个三元运算结果为 null-->
<p th:class="${isMarry}?'css2'">已婚</p>
<p th:text="!${isMarry}?'css2'">已婚</p>
</body>
版权说明 : 本文为转载文章, 版权归原作者所有 版权申明
原文链接 : https://wangmaoxiong.blog.csdn.net/article/details/81077957
内容来源于网络,如有侵权,请联系作者删除!