thymeleaf中th:insertth:replaceth:include的区别

Posted 2020-12-16 lxzlovewyq

关于thymeleaf中th:insert、th:replace、th:include的区别

1. th:insert：保留自己的主标签，保留th:fragment的主标签

 1 需要替换的片段内容：
 2 <footer th:fragment="copy">
 3    <script type="text/javascript" th:src="@{/plugins/jquery/jquery-3.0.2.js}"></script>
 4 </footer>
 5 
 6 导入片段：
 7   <div th:insert="footer :: copy"></div>
 8 
 9 
10 结果为：
11 <div>
12     <footer>
13        <script type="text/javascript" th:src="@{/plugins/jquery/jquery-3.0.2.js}"></script>
14     </footer>  
15 </div> 

2. th:replace：不保留自己的主标签，保留th:fragment的主标签

 1 需要替换的片段内容：
 2 <footer th:fragment="copy">
 3    <script type="text/javascript" th:src="@{/plugins/jquery/jquery-3.0.2.js}"></script>
 4 </footer>
 5 
 6 导入片段：
 7   <div th:replace="footer :: copy"></div>
 8 
 9 结果为：
10 <footer>
11   <script type="text/javascript" th:src="@{/plugins/jquery/jquery-3.0.2.js}"></script>
12 </footer>  

3. th:include：保留自己的主标签，不保留th:fragment的主标签（官方3.0不推荐）

 1 需要替换的片段内容：
 2 <footer th:fragment="copy">
 3    <script type="text/javascript" th:src="@{/plugins/jquery/jquery-3.0.2.js}"></script>
 4 </footer>
 5  
 6 导入片段：
 7   <div th:include="footer :: copy"></div>
 8   
 9 结果为：
10 <div>
11   <script type="text/javascript" th:src="@{/plugins/jquery/jquery-3.0.2.js}"></script>
12 </div>