Thymeleaf的标签和表达式

作者: 问题_解决_分享_讨论_最优 | 来源:发表于2019-11-10 17:39 被阅读0次

Thymeleaf的标签和表达式
spring boot:用adminlte做前端
Thymeleaf常用th标签表达式
thymeleaf使用心得
Thymeleaf 一：基础知识
thymeleaf 标签使用
thymeleaf在引用css样式时，首次访问不加载
语法
Thymeleaf
springboot:thymeleaf (1) 和adminl

1.Thymeleaf的标签

1.1 th:id

替换id标签

<input th:id="'xxx' + ${collect.id}"/>

1.2 th:text

文本替换，包括html标签

若home.welcome=Welcome to our <b>fantastic</b> grocery store!

用<p th:text="#{home.welcome}"></p>解析结果为：

<p>Welcome to our <b>fantastic</b> grocery store!</p>

1.3 th:utext

文本替换，html标签会显示出正确的样式

<p th:utext="#{home.welcome}"></p>即可。

Welcome to our fantastic grocery store!

等效于html :<p>Welcome to our <b>fantastic</b> grocery store!</p>

1.4 th:object

替换对象，用于表单数据对象绑定，将表单绑定到后台controller的一个JavaBean参数。常与th:field一起使用进行表单数据绑定。

public class LoginBean implements Serializable{

@RequestMapping(value = "/login", method = RequestMethod.POST)

public String login(@ModelAttribute(value = "loginBean") LoginBean loginBean，ModelMap model) {...}

}

<form id="login-form" th:action="@{/login}" th:object="${loginBean}">...</form>

1.5 th:value

属性赋值

<input th:value = "${user.name}" />

1.6 th:with

定义局部变量。

<div th:with="firstPer=${persons[0]}">

<p>

The name of the first person is <span th:text="${firstPer.name}">Julius Caesar</span>.

</p>

</div>

当th:with被处理,firstPer变量创建一个局部变量和变量添加到map自上下文,以便它是用于评估和其他上下文中声明的变量从开始,但只有包含< div >标记的范围内。

定义多个局部变量

<div th:with="firstPer=${persons[0]},secondPer=${persons[1]}">

1.7 th:style

设置样式

<div th:style="'display:' + @{(${sitrue} ? 'none' : 'inline-block')} + ''"></div>

1.8 th:onclick

点击事件

<td th:onclick = "'getCollect()'"></td>

1.9 th:each

属性赋值

<tr th:each = "user,userStat:${users}">

1.10 th:if

判断条件

<a th:if = "${userId}"> 如果userId不为空就执行a标签

1.11 th:unless

和th:if判断相反

<a th:href="@{/login} th:unless=${session.user != null}">Login</a>

1.12 th:href

链接地址

<a th:href="@{/login}" th:unless=${session.user != null}>Login</a>

1.13 th:switch

多路选择配合th:case使用

<div class="col-sm-9">

<div th:switch="${channel.enable}">

<p th:case="'1'">

<input id="enable" name="enable" type="radio" class="ace" value="1" checked="checked" />

<span class="lbl">启用</span>

<input id="enable1" name="enable" type="radio" class="ace" value="0" />

<span class="lbl">停用</span>

</p>

<p th:case="'0'">

<input id="enable2" name="enable" type="radio" class="ace" value="1" />

<span class="lbl">启用</span>

<input id="enable3" name="enable" type="radio" class="ace" value="0" checked="checked" />

<span class="lbl">停用</span>

</p>

</div>

</div>

1.14 th:fragment

自定义片段，定义fragment，所有的fragment可以写在一个文件里面，也可以单独存在

    <footer th:fragment="copy">

       the content of footer

    </footer>

1.15 th:insert

保留自己的主标签，保留th:fragment的主标签。

1.16 th:replace

不要自己的主标签，保留th:fragment的主标签。

1.17 th:include

保留自己的主标签，不要th:fragment的主标签。（官方3.0后不推荐）

    <div th:insert="footer :: copy"></div>

    <div th:replace="footer :: copy"></div>

    <div th:include="footer :: copy"></div>

结果为:

    <div>

        <footer>

           the content of footer

        </footer>

    </div>

    <footer>

        the content of footer

    </footer>

    <div>

        the content of footer

    </div>

1.18 th:selectd

selected选择框选中

th:selected="(${xxx.id} == ${configObj.dd})"

1.19 th:src

图片类地址引入

<img class="img-responsive" alt="App Logo" th:src="@{/img/logo.png}" />

1.20 th:inline

定义js脚本可以使用变量

<script type="text/javascript" th:inline="javascript">

1.21 th:action

表单提交的地址

<form action="subscribe.html" th:action="@{/subscribe}">

1.22 th:remove

删除某个属性

1.all:删除包含标签和所有的孩子。

2.body:不包含标记删除,但删除其所有的孩子。

3.tag:包含标记的删除,但不删除它的孩子。

4.all-but-first:删除所有包含标签的孩子,除了第一个。

5.none:什么也不做。这个值是有用的动态评估。

<tr th:remove="all">

1.23 th:attr

设置标签属性，多个属性可以用逗号分隔

2.Thymeleaf的表达式

$ {...} 变量表达式，可用于获取后台传过来的值

<p th:text="${userName}">中国</p>

* {...} 选择变量表达式

＃{...} 消息表达式

@ {...} 链接⽹址表达式，用于替换网页中的 src、href 等的值

th:href="@{/css/home.css}"

〜{...} ⽚段表达式，可以用于引用公共的目标片段

<div th:insert="~{footer :: copy}"></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）<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>



<p th:text="'Big China'">中国</p>



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



<p th:text="80">8</p>



<p th:text="8+8">8 + 8</p>



<p th:text="8+8+' Love '+9+9">8 + 8+' Love '+9+9</p>



<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 true</p>





<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 null</p>





<p th:text="${id}">id</p>



<p th:if="${id} eq null">id 值为 null</p>





<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">值为 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>



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

打个广告，本人博客地址是：风吟个人博客

Thymeleaf的标签和表达式
1.Thymeleaf的标签 1.1 th:id 替换id标签 1.2 th:text ...
spring boot:用adminlte做前端
标签（空格分隔）： sringboot adminlte thymeleaf spring boot 和 admi...
Thymeleaf常用th标签表达式
1：空对象判断：（dataResult为后台返回对象） 2：空 list 判断：（dataResultList为后...
thymeleaf使用心得
thymeleaf使用心得使用thymeleaf必须在HTML标签里加 xmlns:th="http://www...
Thymeleaf 一：基础知识
thymeleaf方言 1、以th开头的方式，需要在html标签里引入thymeleaf的命名空间: 2、以da...
thymeleaf 标签使用
关键字功能介绍案例 th:id 替换id th:text 文本替换 description th:utext...
thymeleaf在引用css样式时，首次访问不加载
thymeleaf在页面head中引用link标签时，需要按照thymeleaf规则来进行引用，否则会出现首次加载...
语法
标签: 语法，语句，表达式，you don't know javascript 语句和表达式 “语句”和“表达式”...
Thymeleaf
Thymeleaf语法/标签说明语法/标签说明layout:fragment 定义模板片段，可以在子页面用同...
springboot:thymeleaf (1) 和adminl
标签（空格分隔）： springboot thymeleaf adminlte 前端后台 html渲染模板库 ...