Thymeleaf中的常用属性

忧郁的大喷菇
390 阅读4分钟

Thymeleaf 是一种用于在服务器端渲染 HTML 页面的模板引擎，它提供了一些常用的属性用于在模板中进行动态数据绑定和逻辑处理。以下是 Thymeleaf 中常用的属性：

  1. th:text：用于设置元素的文本内容，可以将表达式的结果作为文本展示。
  2. th:if/th:unless：用于条件判断，根据条件的真假来控制元素的显示与隐藏。
  3. th:switch/th:case/th:default：用于多路选择，根据表达式的值来选择不同的分支进行渲染。
  4. th:each：用于遍历集合或数组，将集合中的每个元素进行渲染。
  5. th:href：用于设置链接的目标地址，可以将表达式的结果作为链接的 URL。
  6. th:src：用于设置元素的源地址，可以将表达式的结果作为图片或资源的 URL。
  7. th:attr：用于设置元素的属性，可以动态设置元素的属性值。
  8. th:class：用于设置元素的 CSS 类，可以根据条件动态添加或移除 CSS 类。
  9. th:style：用于设置元素的内联样式，可以根据条件动态设置样式属性的值。
  10. th:fragment/th:include：用于模板片段的定义和引用，可以将一个模板片段嵌入到另一个模板中。
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Thymeleaf Attributes Demo</title>
</head>
<body>
    <h1 th:text="${pageTitle}"></h1>

    <div th:if="${showMessage}">
        <p th:text="${message}"></p>
    </div>

    <ul>
        <li th:each="item : ${items}" th:text="${item}"></li>
    </ul>

    <a th:href="@{/about}">About</a>

    <img th:src="@{/images/logo.png}" alt="Logo">

    <div th:attr="data-id=${itemId}, data-type=${itemType}">Element with custom attributes</div>

    <div th:class="${isActive} ? 'active' : 'inactive'">Dynamic CSS class</div>

    <div th:style="${showStyle} ? 'color: red' : 'color: blue'">Dynamic inline style</div>

    <div th:fragment="footer">
        <p>This is the footer.</p>
    </div>
</body>
</html>

在上述示例中，我们使用了以下 Thymeleaf 属性：

  • th:text：用于设置 <h1> 元素的文本内容。
  • th:if：用于条件判断，决定是否渲染 <div> 元素和其中的 <p> 元素。
  • th:each：用于遍历 ${items} 集合，渲染每个元素为 <li> 元素。
  • th:href：用于设置 <a> 元素的链接地址。
  • th:src：用于设置 <img> 元素的图片源地址。
  • th:attr：用于设置 <div> 元素的自定义属性。
  • th:class：用于动态设置 <div> 元素的 CSS 类。
  • th:style：用于动态设置 <div> 元素的内联样式。
  • th:fragment：用于定义模板片段。

请注意，上述示例中使用了 Thymeleaf 的表达式语法，例如 ${pageTitle}、${showMessage}、${message} 等，这些表达式会根据实际的数据进行动态替换和渲染。

字符串拼接

常规拼接： <span th:text="'共'+${p}+'页'+'共'+${p}+'条'"></span>

在Thymeleaf中拼接：<span th:text="|共${p}页${p}条,当前第${p}页|"></span>

常规的拼接方式和 Thymeleaf 的拼接都有各自的用途和优势，取决于你的具体需求和使用场景。

  1. 常规的拼接方式：

    • 优势：常规的拼接方式简单直接，适用于简单的字符串拼接需求。在纯粹的 HTML 中，你可以使用 JavaScript 的字符串拼接功能或者在服务器端使用其他编程语言（如 Java、Python、PHP 等）进行字符串拼接。
    • 不足：常规的拼接方式可能会导致代码变得混乱，特别是在处理复杂的字符串拼接或者动态数据绑定时。此外，如果你在使用服务器端技术进行字符串拼接，可能会涉及到安全性和代码注入的风险。

  2. Thymeleaf 的拼接：

    • 优势：Thymeleaf 是一种服务器端模板引擎，专门用于在服务器端生成动态的 HTML 页面。它提供了丰富的模板语法和表达式，可以方便地进行字符串拼接、条件判断、循环等操作。Thymeleaf 还可以与后端的 Java 代码紧密集成，使得数据的处理更加灵活和安全。
    • 不足：Thymeleaf 需要在服务器端进行解析和渲染，相对于纯粹的 HTML 页面来说，可能会增加服务器的负载和响应时间。此外，Thymeleaf 的学习曲线可能相对陡峭，需要掌握一定的模板语法和表达式。

日期类型

在 Thymeleaf 中，处理日期类型有多种方法。下面是一些常见的日期处理方式：

  1. 内置日期格式化：
    Thymeleaf 提供了内置的日期格式化功能，你可以使用 #dates 对象来格式化日期。例如，要将日期格式化为特定的字符串格式，可以使用以下语法：

    <p>Date: <span th:text="${#dates.format(date, 'yyyy-MM-dd')}"></span></p>

    在上述示例中，${date} 是一个包含日期的模型属性，'yyyy-MM-dd' 是要使用的日期格式。#dates.format 方法将日期格式化为指定的字符串，并将结果显示在 <span> 元素中。

  2. 使用标准的日期格式化器：
    Thymeleaf 还支持使用标准的日期格式化器来格式化日期。你可以在 Thymeleaf 配置中配置日期格式化器，然后使用 #temporals 对象来访问它。例如：

    <p>Date: <span th:text="${#temporals.format(date, 'yyyy-MM-dd')}"></span></p>

    在这种情况下，你需要在 Thymeleaf 的配置中配置日期格式化器，以便 Thymeleaf 知道如何处理日期格式化。

  3. 使用 Java 代码处理日期：
    在 Thymeleaf 中，你还可以使用 Java 代码来处理日期。你可以在模板中调用后端 Java 代码中的方法来处理日期。例如，你可以在模板中调用一个返回格式化日期的 Java 方法：

    <p>Date: <span th:text="${#dates.format(myUtils.formatDate(date), 'yyyy-MM-dd')}"></span></p>

    在上述示例中，myUtils 是一个自定义的 Java 类，其中包含一个名为 formatDate 的方法，用于格式化日期。

字符串操作

在 Thymeleaf 中，你可以使用一些字符串操作来处理和转换字符串。下面是一些常见的字符串操作：

  1. 字符串拼接：
    你可以使用 + 运算符将字符串连接起来。例如：

    <p th:text="'Hello, ' + ${name}"></p>

    在上述示例中，${name} 是一个包含字符串的模型属性，它将与 'Hello, ' 进行拼接。

  2. 字符串长度：
    使用 #strings 对象可以获取字符串的长度。例如：

    <p th:text="${#strings.length('Hello')}"></p>

    上述示例将输出字符串 'Hello' 的长度。

  3. 字符串截取：
    使用 #strings 对象可以截取字符串的一部分。例如，要截取字符串的前几个字符：

    <p th:text="${#strings.substring('Hello', 0, 3)}"></p>

    上述示例将输出字符串 'Hel'，即从索引 0 开始截取长度为 3 的子字符串。

  4. 字符串转换为大写或小写：
    使用 #strings 对象可以将字符串转换为大写或小写。例如，将字符串转换为大写：

    <p th:text="${#strings.toUpperCase('hello')}"></p>

    上述示例将输出字符串 'HELLO'，即将小写字母转换为大写。

avatar
文章
阅读
粉丝