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

---

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