Thymeleaf常用属性
th:each
该属性较为常用,比如从后台传来一个对象集合那么就可以使用此属性遍历输出,它与JSTL中的<c: forEach>类似,此属性既可以循环遍历集合,也可以循环遍历数组及Map。
循环list
controller构建list数据:
@RequestMapping(value="/users")
public String selectAllUser (Model model) {
ArrayList<User> userList = new ArrayList<>();
for (int i = 0; i < 10; i++) {
User user = new User();
user.setId(i);
user.setName("jack" + i);
user.setPhone("13"+i+"11111111");
userList.add(user);
}
model.addAttribute("userList", userList);
return "user";
}
HTML:
这里的interStat类似于jstl里面foreach的varStatus,可以获取到当前的迭代信息。
<table>
<tr th:each="user, interStat : ${userList}">
<td th:text="${interStat.index}"></td>
<td th:text="${user.id}"></td>
<td th:text="${user.name}"></td>
<td th:text="${user.phone}"></td>
</tr>
</table>
interStat里面一些属性的含义:
index: 当前迭代对象的index(从0开始计算)
count: 当前迭代对象的个数(从1开始计算)
size: 被迭代对象的大小
current: 当前迭代变量
even/odd: 布尔值,当前循环是否是偶数/奇数(从0开始计算)
first: 布尔值,当前循环是否是第一个
last: 布尔值,当前循环是否是最后一个
循环map
controller构建map数据:
@RequestMapping(value="/usersMap")
public String selectAllUserMap (Model model) {
HashMap<String, User> userMap = new HashMap<>();
for (int i = 0; i < 10; i++) {
User user = new User();
user.setId(i);
user.setName("jack" + i);
user.setPhone("13"+i+"11111111");
userMap.put(String.valueOf(i), user);
}
model.addAttribute("userMap", userMap);
return "user";
}
HTML:
myMapVal.key相当于map的键,myMapVal.value相当于map中的值。
<div th:each="myMapVal : ${userMap}">
<span th:text="${myMapValStat.count}"></span>
<span th:text="${myMapVal.key}"></span>
<span th:text="${myMapVal.value.name}"></span>
<span th:text="${myMapVal.value.phone}"></span>
<br/>
</div>
循环数组
controller构建数组数据:
@RequestMapping(value="/usersArray")
public String selectAllUserArray (Model model) {
User[] userArray = new User[10];
for (int i = 0; i < 10; i++) {
User user = new User();
user.setId(i);
user.setName("jack" + i);
user.setPhone("13"+i+"11111111");
userArray[i] = user;
}
model.addAttribute("userArray", userArray);
return "user";
}
HTML:
<div th:each="myArrayVal : ${userArray}">
<div th:text="${myArrayVal.name}"></div>
<div th:text="${myArrayVal.phone}"></div>
</div>
th:id
动态设置html标签中的id属性,比如:
<span th:id="${hello}">good</span>
这样会获取从后台传入的hello的值,然后将这个值作为id的值。
th:if
条件判断,比如后台传来一个变量,判断该变量的值,0为男,1为女:
<span th:if="${sex} == 0" >
男:<input type="radio" name="sex" th:value="男" />
</span>
<span th:if="${sex} == 1">
女:<input type="radio" name="sex" th:value="女" />
</span>
th:switch/th:case
switch,case判断语句,比如:
<div th:switch="${sex}">
<p th:case="0">性别:男</p>
<p th:case="1">性别:女</p>
<p th:case="*">性别:未知</p>
</div>
这里的*表示默认,当上面的case都是false的时候,会执行默认的内容。
th:value
类似html标签中的value属性,能对某元素的value属性进行赋值,比如:
<input type="hidden" id="userId" name="userId" th:value="${userId}">
th:inline
th:inline有三个取值类型
-
text
从后台取出数据展示
<span th:inline="text">Hello, [[${user.nick}]]</span> 等同于: <span>Hello, <span th:text="${user.nick}"></span></span>
-
none
有时候希望在html中直接显示[[1,2,3],[4,5]],此时可以使用none
<p th:inline="none"> [[1, 2, 3], [4, 5]]!</p>
-
javasript
如果希望在JavaScript中获取后台相应的数据,可以使用下面内容:
<script th:inline="javascript" type="text/javascript"> var msg = "Hello," + [[${user.phone}]]; alert(msg); </script>
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 智能桌面机器人:用.NET IoT库控制舵机并多方法播放表情
· Linux glibc自带哈希表的用例及性能测试
· 深入理解 Mybatis 分库分表执行原理
· 如何打造一个高并发系统?
· .NET Core GC压缩(compact_phase)底层原理浅谈
· 手把手教你在本地部署DeepSeek R1,搭建web-ui ,建议收藏!
· 新年开篇:在本地部署DeepSeek大模型实现联网增强的AI应用
· Janus Pro:DeepSeek 开源革新,多模态 AI 的未来
· 互联网不景气了那就玩玩嵌入式吧,用纯.NET开发并制作一个智能桌面机器人(三):用.NET IoT库
· 【非技术】说说2024年我都干了些啥