一、th:action 属性
二、th:method 属性
三、th:href 属性
四、th:src 属性
五、th:text 属性
六、th:style 属性
七、th:each 属性
- 1、循环列表
- 2、遍历数组 Array
- 3、遍历 map
八、条件判断 if
九、switch 分支语句
十、 th:inline 属性
- 1、内联 text
- 2、内联 Javascript

大部分属性和 html 的一样，只不过前面加了一个 th 前缀。加了 th 前缀的属性，是经过模版引擎处理的

一、th:action 属性

定义后台控制器的路径，类似标签的 action 属性，主要结合 URL 表达式,获取动态变量

<form id="login" th:action="@{/login}" th:method="post">......</form>

二、th:method 属性

设置请求方法

<form id="login" th:action="@{/login}" th:method="post">......</form>

三、th:href 属性

定义超链接，主要结合 URL 表达式,获取动态变量

<a th:href="@{/query/student}">相对地址没有传参数</a>

四、th:src 属性

用于外部资源引入，比如<script>标签的 src 属性，<img>标签的 src 属性，常与@{}表达式结合使用，在 SpringBoot 项目的静态资源都放到 resources 的 static 目录下，放到 static 路径下的内容，写路径时不需要写上 static

<script type="text/javascript" th:src="@{/js/jquery-3.4.1.js}"></script>

五、th:text 属性

用于文本的显示，该属性显示的文本在标签体中，如果是文本框，数据会在文本框外显示，要想显示在文本框内，使用 th:value

<input type="text" id="realName" name="reaName" th:text="${realName}">

六、th:style 属性

设置样式

<a th:onclick="'fun('+${user.id}+')'" th:style="'color:red'">点击我</a>

七、th:each 属性

这个属性非常常用，比如从后台传来一个对象集合那么就可以使用此属性遍历输出，它与 JSTL 中的<c: forEach>类似，此属性既可以循环遍历集合，也可以循环遍历数组及 Map。

1、循环列表

List<String> userList = new ArrayList<>();
userList.add(...);
userList.add(...);model.addAttribute("userList",uerList);

<div th:each="u:${userList}"><p th:text="${u.id}"></p><p th:text="${u.name}"></p><p th:text="${u.gender}"></p><p th:text="${u.age}"></p>
</div>

语法说明：

th:each="user, iterStat : ${userlist}" 中的 ${userList} 是后台传过来的集合

◼ user

定义变量，去接收遍历${userList}集合中的一个数据

◼ iterStat

${userList} 循环体的信息

◼ 其中 user 及 iterStat 自己可以随便取名

◼ interStat 是循环体的信息，通过该变量可以获取如下信息

index ：当前迭代对象的 index（从 0 开始计算）
count ：当前迭代对象的个数（从 1 开始计算）这两个用的较多
size ：被迭代对象的大小
current ：当前迭代变量
even/odd ：布尔值，当前循环是否是偶数/奇数（从 0 开始计算）
first ：布尔值，当前循环是否是第一个
last ：布尔值，当前循环是否是最后一个

注意：循环体信息 interStat 也可以不定义，则默认采用迭代变量加上 Stat 后缀，即userStat

2、遍历数组 Array

User[] userArray = new User[3];
user[0] = new User(...);
user[1] = new User(...);
user[2] = new User(...);
model.addAttribute("userArray", userArray);

<tr th:each="u:${userArray}" ><td th:text="${uStat.count}+'/'+${uStat.size}"></td><td th:text="${u.id}"></td><td th:text="${u.name}"></td><td th:text="${u.sex}"></td><td th:text="${u.age}"></td><td th:text="${uStat.current.age}"></td>
</tr>

3、遍历 map

Map<String, String> map = new HashMap<>();
map.put("...", "...");
map.put("...", "...");model.addAttribute("map", map);

<div th:each="m, mapStat:${map}"><p th:text="${mapStat.count}"></p><p th:text="${m.key}"></p><p th:text="${m.value}"></p>//如果value是对象的话<p th:text="${m.value.属性}"></p>
</div>

八、条件判断 if

语法：th:if=”boolean 条件” ，条件为 true 显示体内容，th:unless 是 th:if 的一个相反操作

<p th:if="${gender == 'male'}">性别是 男
</p><p th:if="5>0">5 > 0
</p><p th:if="${age > 50}">年龄大于50
</p><p th:if="${name}">name是空
</p>

九、switch 分支语句

<div th:switch="${gender}"><p th:case="m">显示男</p><p th:case="f">显示女</p><p th:case="*">未知</p>
</div>

一旦某个 case 判断值为 true，剩余的 case 则都当做 false，" * "表示默认的case，前面的 case 都不匹配时候，执行默认的 case

十、 th:inline 属性

th:inline 有三个取值类型 (text, javascript 和 none)

1、内联 text

可以让 Thymeleaf 表达式不依赖于 html 标签，直接使用内敛表达式 [[表达式]] 即可获取动态数据，要求在父级标签上加 th:inline = “text”属性

<div th:inline="text">姓名是 [[${name}]]
</div>
<!--不用再加入 th:inline='text'-->
<div>性别是 [[${gender}]]
</div>

2、内联 Javascript

可以在 js 中，获取模版中的数据。

<button onclick="fun()">单击按钮</button>
<script type="text/javascript" th:inline="javascript">var name = [[${user.name}]];var gender = [[${user.gender}]];function fun() {alert("click 用户是"+name+",他的性别是"+id);}
</script>

Thymeleaf (三) ---------Thymeleaf 属性相关推荐

Android View体系（三）属性动画
上一篇文章讲了View滑动的六种方法,其中一种是使用动画,这篇文章我们来讲一讲动画的其中一种:属性动画. 1.android视图动画和属性动画视图动画我们都了解,它提供了AlphaAnimation ...
[css] inline、block、inline-block这三个属性值有什么区别？
[css] inline.block.inline-block这三个属性值有什么区别? inline: 行内元素,元素不独占一行,不可以修改宽高 block: 块级元素,元素独占一行,可以修改宽高 i ...
CSS3制作动画的三个属性
CSS3属性中有关于制作动画的三个属性:Transform,Transition,Animation:我们一起学习完了Transform和Transition,让我们对元素实现了一些基本的动画效果,这 ...
java设计一个立方体类box_实例1: 设计一个立方体类Box,定义三个属性,分别是长,宽,高。定义二个方法,分别计算并输出立方体的体积和表面积。_学小易找答案...
[填空题]表达式 list(filter(lambda x:x>2, [0,1,2,3,0,0])) 的值为 _________ . [填空题]表达式 len(' 中国 '.encode('ut ...
三种属性操作性能比较：PropertyInfo + Expression Tree + Delegate.CreateDelegate
在<上篇>中,我比较了三种属性操作的性能:直接操作,单纯通过PropertyInfo反射和IL Emit.本篇继续讨论这个话题,我们再引入另外两种额外的属性操作方式:Expression ...
设计一个Dog类，包含名字，年龄，颜色三个属性
每日壹句:这份无法言表的喜悦,每天都让人温暖的目眩! ① Dog类包含名字.颜色.年龄三个属性: ② 分别给这三个属性定义两个方法,一个方法用于设置值,另一个方法用于获取值: ③ 定义构造方法来初始化 ...
Java(实验三)类与对象-定义并实现一个长方体类（Cube），包含长（length）、宽（width）与高（height）等三个属性
一.实验目的: 1.学会定义并实现类. 2.学会定义并创建类的对象,通过类的对象访问类的成员属性与方法. 3.学会定义并实现派生类,学会使用派生类的对象. 4.理解并学会使用类的多态性. 二.实验环境 ...
Web:移动商城首页的页眉和页脚的布局和flex项目三个属性
移动商城首页的页眉和页脚的布局先来演示一下flex项目三个属性 1.项目的缩放比例与基准宽度元素属性含义 flex 0 1 auto / initial 默认的,禁止放大,允许收缩,宽度自动 ...
【python】定义一个人类Person：定义一个方法say_hello()，可以向对方发出问候语“hello,my name is XXX” 有三个属性：名字、身高、体重
#定义一个人类Person: # a. 定义一个方法say_hello(),可以向对方发出问候语"hello,my name is XXX" # b. 有三个属性:名字.身高.体重 ...

Thymeleaf (三) ---------Thymeleaf 属性

目录