大部分属性和 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>
<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>
<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>
|