thymeleaf循环语句不循环标签

peach_h

已于 2023-03-11 17:40:04 修改

阅读量1.1k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： Springboot 文章标签：前端 java bootstrap

于 2022-11-27 23:25:59 首次发布

本文链接：https://blog.youkuaiyun.com/Destroy_h/article/details/128065244

Springboot 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了如何在使用Thymeleaf模板引擎时，结合Bootstrap实现轮播图，并通过后台数据动态控制初始活跃项。作者展示了如何利用th:each和th:if条件语句来遍历和判断数据，同时避免了标签冗余问题。

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

------在我使用bootstrap时用到了轮播图，需要将后台数据传送到前端，之前使用的SSM框架，用jsp作为view层，c:foreach+c:choose可以完成此功能，现在需要用到thymeleaf作为view。

thymeleaf的th:each可以起到循环遍历数据作用，然而当需要判断哪条数据作为初始active就需要进行判断。
thymeleaf的th:if搭配th:each="xxx:${yyy}"的xxxStat.index可以进行数据的迭代判断，也可以使用th:each="xxx:${yyy}"的xxxStat.first进行判断。

Block标签解决循环出多余标签显示问题：
使用th:each标签，在循环的过程中会造成生成多个多余标签，导致bootstrap的效果未能正确显示，使用这个标签可以既迭代了数据，又没有生成多余的标签。如图：
在这里插入图片描述
代码：

<div class="carousel-inner">
  <th:block th:each="banner:${banners}">
	  <div class="carousel-item active" th:if="${bannerStat.index==0}">
	      <a>
	      <img th:src="${banner.imageUrl}"  class="d-block w-100" style="width: 100%;height: 500px;" alt="...">
	      </a>
	  </div>
	  <div class="carousel-item" th:if="${bannerStat.index!=0}">
	      <a>
	          <img th:src="${banner.imageUrl}"  class="d-block w-100" style="width: 100%;height: 500px;" alt="...">
	      </a>
	  </div>
  </th:block>
</div>