Thymeleaf条件渲染与循环：掌握th:if、th:unless和th:each的高级用法

Thymeleaf条件渲染与循环掌握th:if、th:unless和th:each的高级用法【免费下载链接】thymeleafThymeleaf is a modern server-side Java template engine for both web and standalone environments.项目地址: https://gitcode.com/gh_mirrors/th/thymeleafThymeleaf是一款现代的服务器端Java模板引擎广泛应用于Web开发中。本文将详细介绍Thymeleaf中条件渲染th:if、th:unless和循环th:each的高级用法帮助开发者轻松实现动态页面效果。一、条件渲染th:if与th:unless的终极指南条件渲染是Web开发中常用的功能Thymeleaf提供了th:if和th:unless两个属性来实现这一需求。1.1 th:if满足条件才显示th:if属性用于指定一个条件当条件为true时所在的标签才会被渲染。例如p th:if${name.length() gt 10} 用户名过长请使用更短的用户名 /p在上面的代码中只有当name的长度大于10时这个段落才会被显示。1.2 th:unless不满足条件才显示th:unless与th:if相反当条件为false时所在的标签才会被渲染。例如div classseedstarterlist th:unless${#lists.isEmpty(allSeedStarters)} h2 th:text#{title.list}List of Seed Starters/h2 !-- 种子启动器列表内容 -- /div这个例子中只有当allSeedStarters列表不为空时才会显示种子启动器列表。1.3 条件判断的高级用法Thymeleaf提供了丰富的表达式来进行条件判断例如使用#fields.hasErrors检查表单错误ul th:if${#fields.hasErrors(*)} classerrorlist li th:eacherr : ${#fields.errors(*)} th:text${err}Input is incorrect/li /ul使用#lists.isEmpty检查列表是否为空div th:unless${#lists.isEmpty(allSeedStarters)} !-- 列表不为空时显示的内容 -- /div二、循环遍历th:each的强大功能th:each属性用于遍历集合生成重复的HTML元素。它是Thymeleaf中最常用的属性之一功能强大且灵活。2.1 基本遍历最基本的遍历用法是直接遍历一个集合tr th:eachsb : ${allSeedStarters} td th:text${{sb.datePlanted}}13/01/2011/td td th:text#{|bool.${sb.covered}|}yes/td td th:text#{|seedstarter.type.${sb.type}|}Wireframe/td /tr这个例子遍历allSeedStarters集合为每个元素生成一个表格行。2.2 遍历状态变量在遍历过程中Thymeleaf提供了一个状态变量可以获取当前遍历的位置、索引等信息tr th:eachrow,rowStat : ${sb.rows} td th:text${rowStat.count}1/td td th:text${row.variety.name}Thymus Thymi/td td th:text${row.seedsPerCell}12/td /tr这里的rowStat就是状态变量它包含以下属性index从0开始的索引count从1开始的计数size集合的大小current当前元素even/odd是否为偶数/奇数行first是否为第一个元素last是否为最后一个元素2.3 遍历数组和Mapth:each不仅可以遍历集合还可以遍历数组和Map!-- 遍历数组 -- li th:eachtype : ${allTypes} th:value${type} th:text#{${seedstarter.type. type}}Wireframe/li !-- 遍历Map -- li th:eachentry : ${userPreferences} span th:text${entry.key}Key/span: span th:text${entry.value}Value/span /li2.4 嵌套遍历在实际开发中我们经常需要处理嵌套的数据结构这时候就需要使用嵌套的th:eachtr th:eachsb : ${allSeedStarters} td th:text${{sb.datePlanted}}13/01/2011/td td th:text#{|bool.${sb.covered}|}yes/td td th:text#{|seedstarter.type.${sb.type}|}Wireframe/td td table tbody tr th:eachrow,rowStat : ${sb.rows} td th:text${rowStat.count}1/td td th:text${row.variety.name}Thymus Thymi/td td th:text${row.seedsPerCell}12/td /tr /tbody /table /td /tr这个例子展示了如何遍历一个包含子列表的对象生成嵌套的表格结构。三、综合应用构建动态表单结合条件渲染和循环遍历我们可以构建出功能强大的动态表单。例如form action# th:action{/seedstartermng} th:object${seedStarter} methodpost div label fortype th:text#{seedstarter.type}Type/label select th:field*{type} option th:eachtype : ${allTypes} th:value${type} th:text#{${seedstarter.type. type}}Wireframe/option /select /div div label th:text#{seedstarter.features}Features/label ul li th:eachfeat : ${allFeatures} input typecheckbox th:field*{features} th:value${feat} / label th:for${#ids.prev(features)} th:text#{${seedstarter.feature. feat}}Electric Heating/label /li /ul /div div label th:text#{seedstarter.rows}Rows/label table tbody tr th:eachrow,rowStat : *{rows} td th:text${rowStat.count}1/td td select th:field*{rows[__${rowStat.index}__].variety} option th:eachvar : ${allVarieties} th:value${var.id} th:text${var.name}Thymus Thymi/option /select /td td input typetext th:field*{rows[__${rowStat.index}__].seedsPerCell} th:errorclassfieldError / /td /tr /tbody /table /div /form这个表单示例展示了如何使用th:each动态生成下拉选项、复选框列表和动态表格行以及如何结合th:field实现表单数据绑定。四、实战技巧与最佳实践4.1 使用th:remove处理不需要的元素在开发过程中我们经常需要在模板中保留一些示例代码以便于前端开发但在实际渲染时又不需要这些代码。这时可以使用th:remove属性li th:removeall input idremoved1 typecheckbox / label forremoved1Turf/label /li4.2 结合CSS实现交替行样式利用th:each的状态变量我们可以轻松实现表格的交替行样式tr th:eachitem, stat : ${items} th:classappend${stat.odd ? odd : even} !-- 表格内容 -- /tr然后在CSS中定义.odd和.even类的样式即可。4.3 处理空集合在遍历集合之前最好先检查集合是否为空以避免不必要的渲染div th:unless${#lists.isEmpty(items)} table tr th:eachitem : ${items} !-- 表格内容 -- /tr /table /div div th:if${#lists.isEmpty(items)} p没有找到相关数据/p /div五、总结Thymeleaf的条件渲染th:if、th:unless和循环遍历th:each是构建动态Web页面的强大工具。掌握这些功能可以让我们的模板更加灵活、简洁和易于维护。通过本文介绍的高级用法和最佳实践相信你已经能够熟练运用这些功能来开发出更加专业的Thymeleaf模板。无论是简单的条件判断还是复杂的嵌套循环Thymeleaf都提供了直观而强大的解决方案让我们的Web开发工作变得更加高效和愉悦。【免费下载链接】thymeleafThymeleaf is a modern server-side Java template engine for both web and standalone environments.项目地址: https://gitcode.com/gh_mirrors/th/thymeleaf创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考