thymeleaf里面*{}，@{}，${}的用法

最新推荐文章于 2023-06-27 16:22:01 发布
最新推荐文章于 2023-06-27 16:22:01 发布
阅读量2.3w 收藏 166
点赞数 27
分类专栏： 前端 文章标签： html html5 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46099269/article/details/108364403
版权

最近开发了个个人博客网站，前端框架使用了semantic-ui和thymeleaf，总结一下在前端里面*{}，@{}，${}的使用

先附上一张常用th标签表

关键字功能介绍案例
th:id替换id<input th:id="'xxx' + ${collect.id}"/>
th:text文本替换<p th:text="${collect.description}">description</p>
th:utext支持html的文本替换<p th:utext="${htmlcontent}">conten</p>
th:object替换对象<div th:object="${session.user}">
th:value属性赋值<input th:value="${user.name}" />
th:with变量赋值运算<div th:with="isEven=${prodStat.count}%2==0"></div>
th:style设置样式th:style="'display:' + @{(${sitrue} ? 'none' : 'inline-block')} + ''"
th:onclick点击事件th:onclick="'getCollect()'"
th:each属性赋值tr th:each="user,userStat:${users}">
th:if判断条件<a th:if="${userId == collect.userId}" >
th:unless和th:if判断相反<a th:href="@{/login}" th:unless=${session.user != null}>Login</a>
th:href链接地址<a th:href="@{/login}" th:unless=${session.user != null}>Login</a> />
th:switch多路选择 配合th:case 使用<div th:switch="${user.role}">
th:caseth:switch的一个分支<p th:case="'admin'">User is an administrator</p>
th:fragment布局标签，定义一个代码片段，方便其它地方引用<div th:fragment="alert">
th:include布局标签，替换内容到引入的文件<head th:include="layout :: htmlhead" th:with="title='xx'"></head> />
th:replace布局标签，替换整个标签到引入的文件<div th:replace="fragments/header :: title"></div>
th:selectedselected选择框 选中th:selected="(${xxx.id} == ${configObj.dd})"
th:src图片类地址引入<img class="img-responsive" alt="App Logo" th:src="@{/img/logo.png}" />
th:inline定义js脚本可以使用变量<script type="text/javascript" th:inline="javascript">
th:action表单提交的地址<form action="subscribe.html" th:action="@{/subscribe}">
th:remove删除某个属性<tr th:remove="all"> 1.all:删除包含标签和所有的孩子。2.body:不包含标记删除,但删除其所有的孩子。3.tag:包含标记的删除,但不删除它的孩子。4.all-but-first:删除所有包含标签的孩子,除了第一个。5.none:什么也不做。这个值是有用的动态评估。
th:attr设置标签属性，多个属性可以用逗号分隔比如 th:attr="src=@{/image/aa.jpg},title=#{logo}"，此标签不太优雅，一般用的比较少。

还有非常多的标签，这里只列出最常用的几个,由于一个标签内可以包含多个th:x属性，其生效的优先级顺序为:
include,each,if/unless/switch/case,with,attr/attrprepend/attrappend,value/href,src ,etc,text/utext,fragment,remove。



1、*{}的使用：选择表达式很像变量表达式，不过它用一个预先选择的对象来代替上下文变量容器来执行以动态变换容器内容，如下：

先在表单标签获取后台传来的blog对象，然后使用th:value与th:object配合用于表单字段绑定、 属性绑定、集合绑定等。

这里是引用


在这里插入图片描述


2、@{}的使用：用于获取链接地址。

在这里插入图片描述


3、${}的使用：和常规的使用差不多，用于字符串的替换或对象获取或属性绑定等，具体作用根据标签而定

  • 此处获取后台传的types对象
    在这里插入图片描述

  • 此处用于属性绑定、表单字段绑定
    在这里插入图片描述

4、@{}和${}的结合使用：在a标签的href中直接直接写对应值会导致解析失败

  • 错误写法
    在这里插入图片描述

  • 正确写法
    在这里插入图片描述

→_→BéLieve
关注
  • 27
    点赞
  • 踩
  • 166
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Thymeleaf模板驱动web1
08-08
在 html 页面中引入 Thymeleaf 命名空间，即，<html lang="en" xmlns:th="http://www.thymeleaf.org">，这样才可以在其他标签里面使用 th:这样的语法。 2. 变量表达式 使用 ${} 语法可以获取变量值，例如：你是否...
Spring boot thymeleaf 简单例子
08-15
在这些模板文件中，我们可以使用Thymeleaf语法来渲染表格、表单等元素，与Controller层的方法交互。 最后，别忘了配置Spring Boot的主应用类，通常命名为`Application`，添加`@SpringBootApplication`注解以启动...
Vue2 新手上路无处不在的特殊符号，让人傻傻分不清 “:”、“.”、“@”、“#” 、“{{}}“ 、“$“,‘$bus‘,‘$event‘
热门推荐
LlanyW的专栏
12-29 6万+
1）$ mount:vue内部除了数据属性，Vue 实例还暴露了一些有用的实例属性与方法。.prevent 阻止浏览器默认行为(@click.prevent="clickFn")：写法：{{xxx}}，xxx 是 js 表达式，可以直接读取到 data 中的所有区域。2）$(形参){方法体}:js的方法名定义规则比较广泛，可以是方法名的定义；.stop 阻止冒泡(@click.stop="clickFn")Vue中有很多的指令，且形式都是 v-xxx， 框架。有参数,就用$event占位,在回调中e接收。
thymeleaf @{}和${}嵌套使用，以及字符串拼接
大吉的博客
12-07 3838
@{}和${}嵌套使用 经过查阅网上大神的写法，嵌套使用应该是这样的： //错误的写法 <a th:href="@{/article/type/${typeId}}">上一页</a> //正确的写法 <a th:href="@{/article/type/{typeId}(typeId=${typeId})}">上一页</a> 问题及解决方案(字符串拼接) 但是如果我想传递一个参数，众所周知thymeleaf是括号传参，但是我接着上面的写法想传递一个参数到C
thymeleaf手动渲染@{}的问题与解决
xzzz2020的博客
11-04 1971
一、简介 最近写了一个项目，然后想利用TemplateEngine实现thymeleaf的手动渲染，将生成的html页面加入Redis缓存，提高项目访问速度。 二、SpringBoot 1.x实现 以前使用的maven版本如下所示： <parent> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-parent</artifactI
Thymeleaf的语法规则
威威的博客
04-16 1370
目录标准变量表达式${}介绍案例：标准变量表达式显示实体对象中的属性选择变量表达式*{}介绍案例：选择变量表达式显示实体对象中的属性案例：选择变量表达式显示实体对象中的属性URL表达式（路径表达式）介绍案例：路径表达式绑定相对路径Thymeleaf常用th标签th:actionth:methodth:hrefth:srcth:idth:nameth:valueth:attrth:textth:objectth:onclickth:styleth:eachth:ifth:unlessth:switch/th:
Thymeleaf的常用语法
万猫学社
06-27 2432
通过以上介绍，相信你已经对Thymeleaf的常用语法有了一定的了解。在实际项目中，你可以根据需要灵活运用这些语法，编写出优雅、高效的模板。
Thymeleaf
qq_48788523的博客
04-04 1万+
SpringBoot的Thymeleaf技术
springboot集成thymeleaf+mybatils+mapper
12-12
在本文中，我们将深入探讨如何将SpringBoot与Thymeleaf、MyBatis以及Mapper进行集成，构建一个完整的前端和后端的小型示例项目。首先，我们需要理解这些技术的基本概念，然后逐步介绍它们如何协同工作。 **...
Java_学习如何使用Spring MVC和Thymeleaf创建Web页面.zip
最新发布
05-22
通过`gs-serving-web-content_main.zip`这个文件，你可能会发现一个示例项目，里面包含了使用Spring MVC和Thymeleaf的完整结构。解压后，你可以看到项目的目录结构、配置文件、Controller类、模板文件等，这将是一个...
基于springboot +thymeleaf 的小米商城管理系统.zip
03-09
2. `README.md`：这是项目的说明文档，通常包含项目介绍、安装指南、使用方法和开发者注意事项等内容。 3. `pom.xml`：这是Maven项目对象模型的配置文件，定义了项目的依赖、插件、构建目标等信息。 4. `sql`：这...
spring-boot-starter-thymeleaf 常用标签，页面复用，SpringBoot集成thymeleaf模板
weixin_51715424的博客
04-04 890
Thymeleaf 的简单使用
Thymeleaf模板引擎常用总结
今天又是充满希望的一天
11-14 1988
一：语法简单总结           Thymeleaf是一个Java类库,是xml/html/html5的模板引擎,SpringBoot框架推荐在MVC的Web应用做做View层使用.           SpringBoot中整合Thymeleaf依赖如下. &lt;dependency&gt; &lt;groupId&gt;org.springframework.boot&...
bash ${ } 用法总结
unixboy
10-21 745
假设我们定义了一个变量为： file=/dir1/dir2/dir3/my.file.txt 我们可以用 ${ } 分别替换获得不同的值： ${file#*/}：拿掉第一条 / 及其左边的字串：dir1/dir2/dir3/my.file.txt ${file##*/}：拿掉最后一条 / 及其左边的字串：my.file.txt ${file#*.}：拿掉第一个 . 及其左边...
@Value注解注入@Value("#{}")和@Value("${}")的区别
WannaRunning的博客
09-12 1万+
 @Value("#{}")   SpEL表达式 @Value("#{}") 表示SpEl表达式通常用来获取bean的属性，或者调用bean的某个方法。当然还有可以表示常量 @Value("#{1}") private int number; //获取数字 1 @Value("${}") 可以获取对应属性文件中定义的属性值。 假如我有一个sys.properties文件 里面规定...
thymeleaf 专题
weixin_34269583的博客
06-19 1252
  Thymeleaf 是一款用于渲染 XML/XHTML/HTML5 内容的模板引擎。类似 JSP，Velocity，FreeMaker 等，它也可以轻易的与 Spring MVC 等 Web 框架进行集成作为 Web 应用的模板引擎。与其它模板引擎相比，Thymeleaf 最大的特点是能够直接在浏览器中打开并正确显示模板页面，而不需要启动整个 Web 应用。 Thymeleaf 初探 相...
thymeleaf使用@{/}进行跳转
weixin_43196575的博客
07-17 4233
<form th:action="@{/login}" method="post" onsubmit="return verify()"> 使用@{/} 获取上下文可以避免打包成war 跳转项目名丢失问题 Jsp 的老方法${pageContext.request.contextPath}=Thymeleaf 的新方式 @{} ...
thymeleaf 基础教程-阅读官方教程（二）
程序员小奎的博客
11-07 1万+
通过thymeleaf 基础教程-搭建杂货铺项目环境（一）我们把官方提供的示例项目进行部署 接下来我们跟着官方文档进行thymeleaf 学习。 我们这里从 2.1 版本的文档进行演示https://www.thymeleaf.org/doc/tutorials/2.1/usingthymeleaf.html。 下面是通过游览器的翻译插件进行翻译教程api 1介绍Thymeleaf 1.1 ...
CSS中 *{ }、*zoom，各种 * 代表的意思
weixin_43390321的博客
01-27 4509
** 的含义 果然眼冒金星，学习前辈的项目代码，突然一堆*，问了问查了查。 .nav li a { display: block; *zoom: 1; } .nav * li a { display: inline; } .nav li * a { display: inline; } *{ color：#ffffff; } body是对body对象样式的控制，而* 代表所有元素（编程里面*一般代表的都是通配符）。 * 则是对所有对象进行样式的控制。 * { }就是对所有的标记做设
thymeleaf 中[[${@}]] 传递js 变量
05-26
在 Thymeleaf 中，我们可以使用 `th:attr` 属性来设置 HTML 元素的属性，并使用 `th:text` 属性来设置元素的文本内容。 如果要在 HTML 中使用 JavaScript 变量，可以将其传递给 HTML 元素的属性，然后在 JavaScript 中获取该属性的值。例如，假设我们有一个 JavaScript 变量 `var myVar = "Hello Thymeleaf!";`，我们想将其传递给一个 `div` 元素的 `data-my-var` 属性，可以在 Thymeleaf 中这样写： ```html <div th:attr="data-my-var=${myVar}">...</div> ``` 然后在 JavaScript 中可以使用 `getAttribute` 方法获取该属性的值： ```javascript var myVar = document.querySelector('div[data-my-var]').getAttribute('data-my-var'); console.log(myVar); // 输出：Hello Thymeleaf! ``` 注意，Thymeleaf 中使用的变量需要使用 `${}` 包裹，而不是使用 `[[${}]]`。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值