用thymeleaf实现前端的奇偶展示（用th:if+th:each实现）

最新推荐文章于 2023-11-30 16:48:09 发布

蓝冰lanbing

最新推荐文章于 2023-11-30 16:48:09 发布

阅读量935

点赞数

分类专栏： JavaEE网站建设文章标签： thymeleaf

本文链接：https://blog.csdn.net/weixin_43827530/article/details/117930816

版权

JavaEE网站建设专栏收录该内容

12 篇文章 0 订阅

订阅专栏

本文介绍了Thymeleaf模板引擎中如何使用条件语句`th:if`进行逻辑判断，展示了一个示例，当用户不是管理员时执行相关代码。此外，还展示了在循环遍历列表时，如何根据`th:each`状态判断奇偶性来显示不同内容。通过这两种方式，你可以更灵活地控制页面元素的显示。

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

想实现的效果：
在这里插入图片描述

我在查thymeleaf的过程中发现有这样的教程：
在这里插入图片描述
条件语句
条件语句使用th:if语法，用于逻辑判断，条件表达式成立时执行标签的内容，否则不执行。如下所示：

<div th:if="${user.isAdmin()==false}">
 ..... 
</div>

自己摸索得出判断方法：

<div class="card-body" th:each="labBean,status : ${labBeanList}">
                        <!--一条卡片-->
                        <div class="row no-gutters bg-light ">
                            <div class="col-md-6 mb-md-0 p-md-4" th:if="${status.odd}">
                                <img src="${labBean.labImg}" class="w-100" alt="这里本该有一张实验室的图片">
                            </div>
                            <div class="col-md-6 position-static p-4 pl-md-0">
                                <h5 class="mt-0">[(${labBean.labName})]</h5>
                                地址：<p> [(${labBean.labAddress})]</p>
                                <p>简介：[(${labBean.labIntroduce})]</p>
                                <a href="#" class="stretched-link">Go somewhere</a>
                            </div>
                            <div class="col-md-6 mb-md-0 p-md-4"  th:if="${status.size%2==0}">
                                <img src="${labBean.labImg}" class="w-100" alt="这里本该有一张实验室的图片">
                            </div>
                        </div>


                    </div>