thyme leaf常用标签

时间: 2024-05-21 10:15:58 浏览: 79

thymeleafth常用标签

### Thymeleaf 常用标签详解 #### 一、概述 Thymeleaf 是一种现代的服务器端 Java 模板引擎，它不同于传统的 JSP 和 FreeMarker 等技术，Thymeleaf 的语法设计更加贴近 HTML，使得前端开发者能够更容易理解和使用。Thymeleaf 的语法简洁明了，易于维护，并且拥有很好的扩展性，适用于各种 Web 应用程序的开发。 #### 二、Thymeleaf 标签详解在本文档中，我们将详细介绍 Thymeleaf 中的一些常用标签及其功能，帮助开发者更好地理解和应用这些标签。 ##### 1. `th:id` - **功能介绍**：用于替换 HTML 元素的 ID 属性。 - **案例**： ```html <input th:id="'xxx'+${collect.id}"/> ``` - **说明**：此例中，`th:id` 会根据表达式 `'xxx'+${collect.id}` 的结果来动态生成输入框的 ID。 ##### 2. `th:text` - **功能介绍**：用于替换 HTML 元素内的文本内容。 - **案例**： ```html <p th:text="${collect.description}">description</p> ``` - **说明**：此例中，元素 `<p>` 内的文本会被 `${collect.description}` 的值所替换。 ##### 3. `th:utext` - **功能介绍**：与 `th:text` 类似，但它支持 HTML 格式的文本替换。 - **案例**： ```html <p th:utext="${htmlcontent}">content</p> ``` - **说明**：此例中，如果 `htmlcontent` 包含 HTML 代码，则这些代码将被解析并显示出来，而不是作为纯文本显示。 ##### 4. `th:object` - **功能介绍**：用于绑定 HTML 元素到一个对象。 - **案例**： ```html <div th:object="${session.user}"> ``` - **说明**：此例中，`div` 元素绑定到了 `${session.user}` 对象上，这样就可以使用点操作符访问该对象的属性。 ##### 5. `th:value` - **功能介绍**：用于设置表单元素的值。 - **案例**： ```html <input th:value="${user.name}"/> ``` - **说明**：此例中，输入框的值会被 `${user.name}` 的值所替换。 ##### 6. `th:with` - **功能介绍**：用于定义局部变量。 - **案例**： ```html <div th:with="isEven=${prodStat.count}%2==0"></div> ``` - **说明**：此例中，在当前 `<div>` 元素范围内，`isEven` 被定义为 `${prodStat.count}%2==0` 的结果。 ##### 7. `th:style` - **功能介绍**：用于设置 HTML 元素的内联样式。 - **案例**： ```html th:style="'display:'+@{(${sitrue}?'none':'inline-block')}+''" ``` - **说明**：此例中，`th:style` 会根据表达式的计算结果来设置元素的 display 属性。 ##### 8. `th:onclick` - **功能介绍**：用于设置 HTML 元素的点击事件。 - **案例**： ```html th:onclick="'getCollect()'" ``` - **说明**：此例中，当元素被点击时，会触发 JavaScript 函数 `getCollect()`。 ##### 9. `th:each` - **功能介绍**：用于循环遍历集合。 - **案例**： ```html <tr th:each="user,userStat:${users}"> ``` - **说明**：此例中，`tr` 标签会根据 `${users}` 集合中的每一项生成一个新的 `<tr>` 元素。 ##### 10. `th:if` 和 `th:unless` - **功能介绍**：用于条件渲染。 - **案例**： ```html <a th:if="${userId==collect.userId}">Link</a> <a th:href="@{/login}" th:unless="${session.user!=null}">Login</a> ``` - **说明**： - `th:if` 用于判断条件是否成立，如果成立则渲染元素。 - `th:unless` 用于判断条件是否不成立，如果不成立则渲染元素。 ##### 11. `th:href` - **功能介绍**：用于设置 HTML 元素的链接地址。 - **案例**： ```html <a th:href="@{/login}" th:unless="${session.user!=null}">Login</a> ``` - **说明**：此例中，`a` 标签的 `href` 属性会被设置为 `/login`。 ##### 12. `th:switch` 和 `th:case` - **功能介绍**：用于实现多路条件判断。 - **案例**： ```html <div th:switch="${user.role}"> <p th:case="'admin'">User is an administrator</p> </div> ``` - **说明**：此例中，根据 `${user.role}` 的值，选择匹配的 `th:case` 分支进行渲染。 ##### 13. `th:fragment` - **功能介绍**：用于定义可重用的 HTML 片段。 - **案例**： ```html <div th:fragment="alert"> Alert message goes here. </div> ``` - **说明**：此例中，定义了一个名为 `alert` 的片段，可以在其他地方通过 `th:include` 或 `th:replace` 引用来重用。 ##### 14. `th:include` - **功能介绍**：用于将一个片段的内容插入到另一个位置。 - **案例**： ```html <head th:include="layout::htmlhead" th:with="title='xx'"></head> ``` - **说明**：此例中，`htmlhead` 片段的内容会被插入到 `<head>` 标签中。 ##### 15. `th:replace` - **功能介绍**：用于完全替换一个元素为另一个元素的内容。 - **案例**： ```html <div th:replace="fragments/header::title"></div> ``` - **说明**：此例中，`div` 元素会被 `fragments/header::title` 的内容所替换。 ##### 16. `th:selected` - **功能介绍**：用于设置下拉列表或复选框的选中状态。 - **案例**： ```html th:selected="(${xxx.id}==${configObj.dd})" ``` - **说明**：此例中，如果 `${xxx.id}` 等于 `${configObj.dd}`，则元素被选中。 ##### 17. `th:src` - **功能介绍**：用于设置图片或其他资源的 URL。 - **案例**： ```html <img class="img-responsive" alt="AppLogo" th:src="@{/img/logo.png}"/> ``` - **说明**：此例中，`img` 标签的 `src` 属性会被设置为 `/img/logo.png`。 ##### 18. `th:inline` - **功能介绍**：用于定义 JavaScript 代码块，允许在其中使用变量。 - **案例**： ```html <script type="text/javascript" th:inline="javascript"> var myVar = [[${myVar}]]; </script> ``` - **说明**：此例中，JavaScript 代码中的 `[[${myVar}]]` 会被实际的值替换。 ##### 19. `th:action` - **功能介绍**：用于设置表单提交的地址。 - **案例**： ```html <form action="subscribe.html" th:action="@{/subscribe}"> ``` - **说明**：此例中，表单提交的地址会被设置为 `/subscribe`。 ##### 20. `th:remove` - **功能介绍**：用于移除 HTML 元素或其属性。 - **案例**： ```html <tr th:remove="all">1.all:删除包含标签和所有的孩子。2.body:不包含标记删除,但删除其所有的孩子。3.tag:包含标记的删除,但不删除它的孩子。4.all-but-first:删除所有包含标签的孩子,除了第一个。5.none:什么也不做。这个值是有用的动态评估。 ``` - **说明**：此例中，`th:remove` 可以根据不同的值来决定如何处理元素或其子元素。 ##### 21. `th:attr` - **功能介绍**：用于设置 HTML 元素的任意属性。 - **案例**： ```html <img th:attr="src=@{/image/aa.jpg},title=#{logo}"> ``` - **说明**：此例中，`img` 标签的 `src` 属性会被设置为 `/image/aa.jpg`，而 `title` 属性会被设置为国际化字符串 `#{logo}`。 ### 总结以上介绍了 Thymeleaf 中常用的标签及其基本用法，这些标签可以帮助开发者更灵活地控制 HTML 页面的生成和数据展示。通过合理使用这些标签，可以显著提高 Web 开发的效率和质量。希望本文能对您理解和使用 Thymeleaf 有所帮助。

以下是thyme leaf中常用的标签： 1. th:block：定义一个块级元素，可以用来包含多个元素。 2. th:text：将表达式的结果作为文本输出。 3. th:if/th:unless：根据表达式的值来判断是否输出该元素。 4. th:switch/th:case：根据表达式的值来判断输出哪个元素。 5. th:each：循环输出集合中的元素。 6. th:href：设置链接的目标地址。 7. th:src：设置图片等资源的路径。 8. th:attr：设置元素的属性。 9. th:object：设置对象。 10. th:include：包含其他页面的内容。

阅读全文

thyme leaf常用标签

相关推荐

thymeleaf常用标签页面

thymeleaf的th标签

Thyme leaf使用实例

SpringBoot-Maven-Thyme leaf完整博客系统(包含前后台数据库，拿过去就能直接用). txt后端- Ja

运用springboot和thyme leaf实现部门表和员工表的增删改查，并写出数据库

在spring boot在用thyme leaf模板写一个用css和js使用get方法提交水泵电流和电压页面的输入输出

Thyme-crx插件

thyme_ubuntu_notification:在番茄钟结束时发送 Ubuntu 通知的 Thyme gem 插件

thyme:我认为有用的Mathcs出版物

amazing-thyme:用Stackbit创建的Jamstack网站

pink-thyme:用Stackbit创建的Jamstack网站

kotlin-web-maven-spring-thyme-secure-multiple

my-thyme:React中有趣的小时间跟踪应用程序

thyme:用于浏览和查看照片的最小单页 Web 应用程序

groovy-web-gradle-spring-websocket-thyme-vanilla

Spring Thyme Seedstarter Manager：Thymeleaf与Spring 3教程配套应用

Thyme系统BUG报告分析2023-02-13详细信息

现在有一个用HTML，css，js，thyme leaf，spring boot，mybatis，mysql等实现的高校教学辅助系统，为它的系统分层画一张分层设计图

springboot整合thyme

最新推荐

Thymeleaf显示base64字符串为图片.docx

国外经典LOGO设计欣赏

JSF如何监测和处理session超时

autocorr-vi-5.3.6.1-24.el7.noarch.rpm.zip

ssm旅游资源网站.zip

Angular程序高效加载与展示海量Excel数据技巧

管理建模和仿真的文件

【SecureCRT高亮技巧】：20年经验技术大佬的个性化设置指南

如何设计一个基于FPGA的多功能数字钟，实现24小时计时、手动校时和定时闹钟功能？

Argos客户端开发流程及Vue配置指南