＜2＞thymeleaf的常见属性

最新推荐文章于 2024-03-31 13:34:00 发布

做一个有信仰de人

最新推荐文章于 2024-03-31 13:34:00 发布

阅读量171

点赞数

分类专栏： thymeleaf 文章标签： java

本文链接：https://blog.csdn.net/z1475307570/article/details/109531730

版权

thymeleaf 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

文章目录

th:each
条件判断
内敛表达式th:inline
- 内敛文本th:inline="text"
- 内敛脚本th:inline="javascript"

一般在标签属性前加上th:

th:action
th:method
th:href
th:src
th:id
th:name
th:value
th:attr
th:text
th:object
th:onclick
th:style
th:each
条件判断: th:if、th:unless
内敛表达式: th:inline

以th:action为例

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>常见属性</title>
</head>
<body>
<form action="http://localhost:8080/test2">
    用户编号:<input type="text" name="id">
    用户姓名:<input type="text" name="username">
    用户密码:<input type="text" name="pwd">
    <input type="submit" value="提交">
</form>

<form th:action="@{/test2}">
    用户编号:<input type="text" name="id">
    用户姓名:<input type="text" name="username">
    用户密码:<input type="text" name="pwd">
    <input type="submit" value="提交">
</form>
</body>
</html>

th:属性主要用来去后台传到前端的值，如果没有取值可以不用使用

th:each

循环List

Controller测试类

@RequestMapping("/each/list")
    public String eachList(Model model) {
        List<User> users = new ArrayList<>();
        for (int i = 0; i < 10; i++) {
            User user = new User();
            user.setId(100+i);
            user.setUsername("user" + i);
            user.setAge(18+i);
            users.add(user);
        }
        model.addAttribute("userList", users);
        return "eachList";
    }

前端展示

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>循环遍历list集合</title>
</head>
<body>
<h2>循环遍历list集合</h2>
<!--
     user: 当前循环变量名称(随意取名)
     userState: 当前循环变量的状态(可选, 默认是对象变量+Stat)
     ${userList}: 当前循环的集合
     userState.index: 索引从0开始
     userState.count: 计数从1开始
-->
<div th:each="user, userStat:${userList}">
    <span th:text="${userStat.index}"></span>
    <span th:text="${userStat.count}"></span>
    <span th:text="${user.id}"></span>
    <span th:text="${user.username}"></span>
    <span th:text="${user.age}"></span>
</div>
<hr>
<div th:each="user:${userList}">
    <span th:text="${userStat.index}"></span>
    <span th:text="${userStat.count}"></span>
    <span th:text="${user.id}"></span>
    <span th:text="${user.username}"></span>
    <span th:text="${user.age}"></span>
</div>
</body>
</html>

循环Map

Controller测试类

@RequestMapping("/each/map")
    public String eachMap(Model model) {
        Map<Integer, Object> userMaps = new HashMap<>();
        for (int i = 0; i < 10; i++) {
            User user = new User();
            user.setId(100+i);
            user.setUsername("user" + i);
            user.setAge(18+i);
            userMaps.put(i, user);
        }
        model.addAttribute("userMaps", userMaps);
        return "eachMap";
    }

前端展示

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>循环遍历map集合</title>
</head>
<body>
<h2>循环遍历map集合</h2>
<div th:each="userMap,userMapStat:${userMaps}">
    <span th:text="${userMapStat.index}"></span>
    <span th:text="${userMapStat.count}"></span>
    <span th:text="${userMap.key}"></span>
    <span th:text="${userMap.value}"></span>
    <span th:text="${userMap.value.id}"></span>
    <span th:text="${userMap.value.username}"></span>
    <span th:text="${userMap.value.age}"></span>
</div>
<hr>
<div th:each="userMap:${userMaps}">
    <span th:text="${userMapStat.index}"></span>
    <span th:text="${userMapStat.count}"></span>
    <span th:text="${userMap.key}"></span>
    <span th:text="${userMap.value}"></span>
    <span th:text="${userMap.value.id}"></span>
    <span th:text="${userMap.value.username}"></span>
    <span th:text="${userMap.value.age}"></span>
</div>
</body>
</html>

循环Array(与List一样)

Controller测试类

@RequestMapping("/each/array")
    public String eachArray(Model model) {
        User[] userArray = new User[10];
        for (int i = 0; i < 10; i++) {
            User user = new User();
            user.setId(100+i);
            user.setUsername("user" + i);
            user.setAge(18+i);
            userArray[i] = user;
        }
        model.addAttribute("userArray", userArray);
        return "eachArray";
    }

前端展示

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>循环遍历array集合</title>
</head>
<body>
<h2>循环遍历array集合</h2>
<!--
     user: 当前循环变量名称(随意取名)
     userState: 当前循环变量的状态(可选, 默认是对象变量+Stat)
     ${userList}: 当前循环的集合
     userState.index: 索引从0开始
     userState.count: 计数从1开始
-->
<div th:each="user, userStat:${userArray}">
    <span th:text="${userStat.index}"></span>
    <span th:text="${userStat.count}"></span>
    <span th:text="${user.id}"></span>
    <span th:text="${user.username}"></span>
    <span th:text="${user.age}"></span>
</div>
<hr>
<div th:each="user:${userArray}">
    <span th:text="${userStat.index}"></span>
    <span th:text="${userStat.count}"></span>
    <span th:text="${user.id}"></span>
    <span th:text="${user.username}"></span>
    <span th:text="${user.age}"></span>
</div>
</body>
</html>

条件判断

Controller测试类

@Controller
public class IfController {
    @RequestMapping("/condition")
    public String condition(Model model) {
        model.addAttribute("sex", 1);
        model.addAttribute("flag", true);
        model.addAttribute("productType", 0);
        return "condition";
    }
}

前档展示

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>条件判断</title>
</head>
<body>
<h1>th:if 满足条件执行</h1>
<div th:if="${sex eq 1}">男</div>
<div th:if="${sex eq 0}">女</div>

<h1>th:unless 与th:if用法相反</h1>
<div th:unless="${sex ne 1}">女</div>

<h1>th:switch</h1>
<div th:switch="${productType}">
    <span th:case="0">产品0</span>
    <span th:case="1">产品1</span>
    <span th:case="*">其他</span>
</div>
</body>
</html>

内敛表达式th:inline

内敛表达式取值不会依赖html标签

内敛文本th:inline=“text”

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

内敛脚本th:inline=“javascript”

script不能使用${data}直接去后台的数据，要求在 script 标签上加 th:inline =“text”属性，使用[[表达式]]取值

测试页面

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>内敛表达式</title>
</head>
<body>
<div th:text="${data}">xxxx</div>

<h2>内敛文本 th:inline="text"</h2>
<div th:inline="text">
    数据:[[${data}]]
</div>

<h2>内敛脚本 th:inline="javascript"</h2>
<button onclick="show()">展示数据</button>
<script type="application/javascript" th:inline="javascript">
    function show() {
        alert([[${data}]])
    }
</script>
</body>
</html>

做一个有信仰de人

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
＜2＞thymeleaf的常见属性

文章目录th:each循环List循环Map循环Array(与List一样)条件判断内敛表达式th:inline内敛文本th:inline="text"内敛脚本th:inline="javascript"一般在标签属性前加上th:th:actionth:methodth:hrefth:srcth:idth:nameth:valueth:attrth:textth:objectth:onclickth:styleth:each条件判断: th:if、th:unless内敛表
复制链接

扫一扫

专栏目录