深入了解th:block

发布时间:2023-05-20

一、介绍

th:block是Thymeleaf中一个非常有用的标签,它允许您在模板中添加无意义的块级元素,用于组织模板中的展示元素的结构,同时不需要在生成的页面中添加额外的内容。 另外,th:block还提供了一些属性,例如th:eachth:if等,可以灵活地用于生成模板中的动态元素。

二、用法

使用th:block和其他Thymeleaf标签相同,可以在开发环境中实时预览效果。它可以用于创建多个块级元素,例如:

<th:block>
  <div>div元素</div>
  <p>p元素</p>
</th:block>

以上代码会在生成的HTML页面中包含两个块级元素。

三、th:each属性

使用th:each属性可以进行循环渲染。以下示例中,我们生成了一个简单的商品列表:

<th:block th:each="product : ${products}">
  <div class="product">
    <span th:text="${product.name}"></span>
    <span th:text="${product.price}"></span>
  </div>
</th:block>

以上代码将在页面中渲染包含商品名称和价格的<div>元素,其数量取决于products的大小。

四、th:if属性

使用th:if属性可以根据某些条件动态地渲染元素,以下示例中,我们只渲染价格小于20的商品:

<th:block th:each="product : ${products}">
  <div class="product" th:if="${product.price < 20}">
    <span th:text="${product.name}"></span>
    <span th:text="${product.price}"></span>
  </div>
</th:block>

以上代码仅在商品价格小于20时渲染,即不满足条件时不会在页面中生成对应的元素。

五、th:fragment属性

使用th:fragment属性可以定义通用的片段内容,以便在不同的页面中多次使用。 以下示例中,我们定义了一个名为header的片段,用于在多个页面中显示相同的标题内容:

<th:block th:fragment="header">
  <h1>My Website</h1>
</th:block>

在其他页面中,只需使用th:replace属性引用该片段即可:

<th:block th:replace="fragments/header::header">
</th:block>

以上代码在当前位置引用了header片段,并且保留了片段本身的全部结构和组成元素。

六、总结

在Thymeleaf中,th:block是一个非常有用的标签,它可以帮助我们快速定位页面中的组成结构,并且可以和其他常见的Thymeleaf标签(如th:eachth:if)等灵活地组合使用,帮助我们快速开发出需要的模板。