关于SpringBoot Thymeleaf 模板语言使用小总结

最新推荐文章于 2025-06-11 13:33:13 发布

走在It前端的小菇凉

最新推荐文章于 2025-06-11 13:33:13 发布

阅读量568

点赞数

CC 4.0 BY-SA版权

分类专栏：前端thymeleaf模板引擎文章标签： html

本文链接：https://blog.youkuaiyun.com/V199311/article/details/105437650

前端thymeleaf模板引擎专栏收录该内容

2 篇文章

订阅专栏

本文是对SpringBoot中Thymeleaf模板语言的使用进行的小结，包括模板标志的使用，如何在JavaScript中处理Thymeleaf语法，以及处理后台返回Map数据时去除小数点的方法。还介绍了th:each指令用于数据遍历的用法，以及th:if进行条件判断的基本语法。

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

为了不经常鬼畜，避免来回纠结SpringBoot Thymeleaf语法，总结一下常用语法方便之后自己查询使用。
模板标志： th:
js如果有Thymeleaf模板语法，一定在“script”标签中加入识别 th:inline=“javascript”，即：

   <script th:inline="javascript">
        let aRoomTypeList = [[${paveDesignDTO.roomType}]];
        let aStyleList=[[${paveDesignDTO.style}]];
        let aInterestList=[[${paveDesignDTO.interest}]];
    </script>

后台直接返回的Map数据，总是会自带小数点，去掉语法：
${#numbers.formatInteger(paveDesignConfig.minLength,0)}
其中paveDesignConfig.minLength是要处理的参数，0指的是需要保留几位小数，可以对数据进行判断并且处理显示：

    <span th:text="${paveDesignConfig.minLength}==null?'':${#numbers.formatInteger(paveDesignConfig.minLength,0)}+' mm'"></span>

th:each数据取值语法：

简易代码：

            <div class="" th:if="${paveRuleDTO.type} == 2" th:each="imgList :${paveRuleDTO.paveRuleImgList}">
                <div class="fl prevImgBox">
                    <div th:class="${imgList.pcThumbnail}==null?'fl preview-box':(${imgList.pcThumbnail}==''?'fl preview-box':'fl preview-box hasVal')">
                        <img th:src="${imgList.pcThumbnail}==null?'':${imgList.pcThumbnail}" alt="背景图片"/>
                    </div>
                    <div class="btn btn-default removeBg" th:onclick="|javascript:removeBg(this)|"></div>
                </div>
            </div>

<div th:each="imgList :${paveRuleDTO.paveRuleImgList}"></div>
/*修改成*/
<div th:each="item, imgList :${paveRuleDTO.paveRuleImgList}"></div>
取值可用${item.id}, ${item}是当前元素

其中imgList 对象有以下几种属性：
index：从0开始的角标
count：元素的个数，从1开始，第count个
size：总元素个数
current：当前遍历到的元素
even/odd：返回是否为奇偶，返回true/false
first/last：返回是否为第一或最后，返回true/false

**th:if **，多重判断

th:if="${paveDesignConfig.waveguideLineInnerDetails!=null and paveDesignConfig.isUseWaveguideLine==1}"

待续……