学无先后，达者为师

网站首页编程语言正文

thymeleaf中th:include, th:insert, th:replace的区别

作者：BlackBox_ 更新时间： 2022-01-07 编程语言

thymeleaf中th:include, th:insert, th:replace的区别

一、代码和介绍

footer.html

<footer th:fragment="copy">
	需要copy的代码...
</footer>

需要引用copy的页面，有三种方式
- 【注意】这里的footer是页面的名称，不是标签的名称

<body>
    ...其他代码
    <div th:insert="footer :: copy"></div> 
    <div th:replace="footer :: copy"></div>
    <div th:include="footer :: copy"></div>
</body>

渲染后的效果
1. th:insert
  - 相当于把需要引入的内容，标签+代码一同引如到div内部
```
<div>
	<footer th:fragment="copy">
	需要copy的代码...
	</footer>
</div>
```
2. th:replace
  - th:replace是在div标签上写的，渲染效果则是用footer把div替换掉
```
<footer th:fragment="copy">
	需要copy的代码...
</footer>
```
3. th:include
  - 将footer标签体内的内容，放到div中进行渲染，div中原先有的内容也会被覆盖掉
```
<div>
	<footer th:fragment="copy">
	需要copy的代码...
	</footer>
</div>
```

二、演示截图

代码截图

在这里插入图片描述

chrome浏览器中渲染后的结果

在这里插入图片描述

原文链接：https://blog.csdn.net/BlackBox_/article/details/122111384

上一篇：解决 el-form 异步校验导致重复校验的问题
下一篇：iframe 监听滚动事件并滚动到指定位置

相关推荐

2022-04-23 一起来了解python的基本输入和输出_python
2023-07-24 uniapp开发 h5和小程序拖动悬浮按钮
2023-12-08 float 引起的塌陷
2022-05-11 C++程序代码优化的方法实例大全_C 语言
2023-12-06 Binding to target org.springframework.boot.autocon
2022-05-04 C#异步编程由浅入深(一)_C#教程
2022-12-23 C++ Boost System超详细讲解_C 语言
2022-09-06 C语言超详细讲解猜数字游戏的实现_C 语言

栏目分类

最近更新