thymeleaf常用属性--包括th:each,条件判断和th:inline

最新推荐文章于 2023-03-06 15:12:56 发布

计算机界的小学生

最新推荐文章于 2023-03-06 15:12:56 发布

阅读量407

点赞数

本文链接：https://blog.csdn.net/weixin_52188717/article/details/117336922

版权

本文详细讲解了Thymeleaf模板引擎的基础属性如text、href和action，以及th:each用于遍历列表、th:if和th:unless进行条件判断。实例涵盖HTML元素、表单提交和JavaScript交互。

摘要由CSDN通过智能技术生成

1.基础属性

<body>
<h1>text属性：</h1>
<h1 th:text="${lff.name}"></h1><br>

<p>href属性：</p>
<a th:href="@{/href}">查看</a><br>

<p>action属性</p>
<form th:action="@{/action}" th:method="post">
    <button>提交</button>
</form><br>

<p>th:onclick属性</p>
<a th:onclick="'show('+${lff.id}+')'">点击</a>
<script type="text/javascript">
    function show(id) {
        alert("用户编号为：" + id);
    }
</script>
<br>
</body>

在这里插入图片描述
2.th:each:常用来进行遍历

@RequestMapping(value = "/each/list")
    public String eachList(Model model){
        List<user> userList=new ArrayList<user>();
        for (int i=0;i<10;i++) {
            User user=new User();
            user.setId(i);
            user.setName("张"+i+"狗");
            user.setPhone("1830000"+i);
            user.setAddress("第"+i+"组");
            userList.add(user);
        }
        model.addAttribute("userList",userList);
        return "eachList";
    }

<h1>th:each属性</h1>
<p>循环遍历List集合</p>
<div th:each="user,userStat:${userList}">
<!--th:each="user, iterStat : ${userlist}"中的 ${userList} 是后台传过来的集合
◼ user:${userList}集合中的一个数据
◼ iterStat :${userList} 循环体的信息-->
    <span th:text="${user.id}"></span><br>
    <span th:text="${user.name}"></span><br>
    <span th:text="${user.phone}"></span><br>
    <span th:text="${user.address}"></span><br>
    <br>
</div>

结果：
在这里插入图片描述 3.条件判断
th:if
th:unless（和判断条件相反）
th:switch和th:case

@RequestMapping(value = "/condition")
    public String condition(Model model){
        user u1=new user(1,"zjc","183","杭州");
        user u2=new user(2,"lff","182","杭州");
        user u3=new user(3,"张二狗","183","辽阳");
        model.addAttribute("u1",u1);
        model.addAttribute("u2",u2);
        model.addAttribute("u3",u3);
        return "condition";
    }

<span th:if="${u1.id eq 1}">
    <p>if判断成功</p>
</span>

<span th:unless="${u1 eq null}">
    <p>unless判断成功</p>
</span>

<span th:switch="${u1.id}">
    <span th:case="1">姓名：张家程</span>
    <span th:case="2">姓名：李芳芳</span>
    <span th:case="3">姓名：张二狗</span>
</span>