SpringBoot——Thymeleaf常见属性-条件判断th:if、th:unless、th:switch、th:case

最新推荐文章于 2024-09-05 23:16:39 发布

原创最新推荐文章于 2024-09-05 23:16:39 发布 · 1.4w 阅读

30 ·

CC 4.0 BY-SA版权

文章标签：

#java #springboot

Spring Boot 专栏收录该内容

19 篇文章

订阅专栏

本文介绍了Thymeleaf模板引擎的常用属性，如th:action、th:method、th:href等，并展示了如何在HTML中进行条件判断，如th:if、th:unless和th:switch。通过一个具体的Controller示例和前端页面，解释了这些属性和条件判断的实际运用。此外，还提到了Thymeleaf的th:onclick和th:style属性，以及如何设置样式和处理事件。最后，文章通过一个简单的SpringBoot项目展示了Thymeleaf在实际开发中的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1 Thymeleaf常见属性

先来说说Thymeleaf常见的属性

1 th:action 定义后台控制器的路径，类似<form>标签的 action 属性，主要结合 URL 表达式,获取动态变量

2 th:method 设置请求方法<form id="login" th:action="@{/login}" th:method="post">......</form>

3 th:href  定义超链接，主要结合 URL 表达式,获取动态变量

4 th:src  用于外部资源引入，比如<script>标签的 src 属性，<img>标签的 src 属性，常与@{}表达式结合使用，在 SpringBoot 项目的静态资源都放到 resources 的 static 目录下。
放到 static 路径下的内容，写路径时不需要写上 static

5 th:id  类似 html 标签中的 id 属性<span th:id="${hello}">aaa</span>

6 th:name 设置名称 <input th:type="text" th:id="userName" th:name="userName">类似 html 标签中的 value 属性，能对某元素的 value 属性进行赋值<input type="hidden" id="userId" name="userId" th:value="${userId}">

7 th:attr 该属性也是用于给 HTML 中某元素的某属性赋值，好处是可以给 html 中没有定义的属性动态的赋值

8 th:text 用于文本的显示，该属性显示的文本在标签体中，如果是文本框，数据会在文本框外显示，要想显示在文本框内，使用 th:value

<input type="text" id="realName" name="reaName" th:text="${realName}">

9 th:object 用于数据对象绑定通常用于选择变量表达式（星号表达式）

10 th:onclick  目前 thymeleaf 版本要求只能传递数字和布尔值<a th:οnclick="'show('+${user.id}+')'">点击：显示学生编号</a>

11 th:style 设置样式  <a th:οnclick="'show('+${user.id}+')'"
th:style="'font-size:40px;color:red;'">点击：显示学生编号</a>

2 Thymeleaf条件判断th:if、th:unless、th:switch、th:case

controller类

package com.liuhaiyang.springboot.controller;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;

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

前端数据展示页面（condition.xml）

<!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/th:case用法</h1>
<div th:switch="${productType}">
    <span th:case="0">产品0</span>
    <span th:case="1">产品1</span>
    <span th:case="*">无此产品</span>
</div>
</body>
</html>

核心配置文件