添加链接
link管理
链接快照平台
  • 输入网页链接,自动生成快照
  • 标签化管理网页链接
相关文章推荐
飞奔的铁板烧  ·  thymeleaf ...·  3 天前    · 
销魂的跑步鞋  ·  《Spring Boot ...·  3 天前    · 
求醉的酸菜鱼  ·  Create a website in ...·  2 月前    · 
乖乖的拐杖  ·  winform ...·  1 月前    · 
爱吹牛的台灯  ·  JSR223/Jython ...·  3 月前    · 
酒量大的小蝌蚪  ·  银行_深圳新闻网·  4 月前    · 

一开始学习Thymeleaf的时候是不知道有th:block这个标签的,这是因为在使用Thymeleaf的过程中遇到了各种各样的需求才导致有这样的一种需要,那就是多种同级容器标签动态重复迭代的需求,在不使用th:block这个标签的情况只能从后台拼接字符串输出到前端显示,这样就导致了后端代码的臃肿,看起来很不优雅,后来在互联网上查找了很久才发现有th:block这个标签才完美解决了这种情况。

th:block的作用

它是Thymeleaf提供的唯一的一个Thymeleaf块级元素,其特殊性在于Thymeleaf模板引擎在处理< th:block >的时候会删掉它本身,标签本身不显示,而保留其内容

th:block的用法和使用场景

1、多种同级容器标签动态重复迭代

span和div两个块重复迭代

<th:block th:each="user : ${users}">
	<span class="timeline-label">
		<span class="label btn btn-primary">2021年8月</span>
	</span>
	<div class="timeline-item">
		<div class="timeline-point timeline-point-success">
			<i class="bi bi-record-circle"></i>
		<div class="timeline-event">
			<div class="timeline-body">														
				<ul class="list-group mb-2 list-style-reset">
					<li class="border-bottom mb-2">
						<a href="info.html"><i class="bi bi-caret-right"></i>&nbsp;Spring Boot Web 开发注解篇</a>
					<li class="border-bottom mb-2">
						<a href="info.html"><i class="bi bi-caret-right"></i>&nbsp;Spring Boot 表单验证篇</a>
</th:block>

2、多种条件相同的模块控制的条件分支

添加和修改两个功能相同条件下显示

<th:block th:if='${flag==1}'>
    <button>添加</button>
    <button>修改</button>
</th:block>
<button>删除</button>

3、与原型注释块结合使用

<table>
    <!--/*/ <th:block th:each="user : ${users}"> /*/-->
        <td th:text="${user.login}">...</td>
        <td th:text="${user.name}">...</td>
        <td colspan="2" th:text="${user.address}">...</td>
    <!--/*/ </th:block> /*/-->
</table>

此解决方案如何使模板成为有效的HTML(无需在 <table> 内添加隐藏的<div>),并且当在浏览器中作为原型静态打开时,仍可以正常使用!