Thymeleaf常用属性
时间:2019-10-18
本文章向大家介绍Thymeleaf常用属性,主要包括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>
原文地址:https://www.cnblogs.com/atsdb/p/11696772.html
- 济西站构建大数据运营网络,打造智能化列车加工厂
- 五位数终端收购的域名dongxiao.cn已启用
- 全球互联网发展进入“拐点”——展望下一代互联网
- 2 分钟论文:语音生成表情包背后的技术原理
- 享学课堂谈-Python程序员的常见错误
- 区块链技术,如何提升网络安全?
- 趣店推“大白汽车”业务 启用域名dabaiqiche.com
- 糖果吃了那么多,你真的知道比特币分叉是咋回事吗?
- 静息态网络拓扑传输认知任务信息
- MYSQL字符串截取总结:LEFT、RIGHT、SUBSTRING、SUBSTRING
- 如何用Python提取中文关键词?
- 工信部:将加大网络提速降费力度加快百兆宽带普及
- 人工智能AI(5):线性代数之矩阵、线性空间
- iOS开发进阶篇——FRP与ReactiveCocoa的介绍(一)
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Dynamic Programming - 322. Coin Change
- Dynamic Programming - 279. Perfect Squares
- Dynamic Programming - 120. Triangle
- Dynamic Programming - 63. Unique Paths II
- Tree - 109. Convert Sorted List to Binary Search Tree
- Tree - 108. Convert Sorted Array to Binary Search Tree Easy
- Tree - 236. Lowest Common Ancestor of a Binary Tree
- Tree - 235. Lowest Common Ancestor of a Binary Search Tree
- Tree - 98. Validate Binary Search Tree
- Tree - 199. Binary Tree Right Side View
- Tree - 103. Binary Tree Zigzag Level Order Traversal
- Tree - 107. Binary Tree Level Order Traversal II
- Trie - 212. Word Search II
- Trie - 211. Add and Search Word - Data structure design
- Trie - 208. Implement Trie (Prefix Tree)