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

最近开发了个个人博客网站，前端框架使用了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:case	th: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:selected	selected选择框选中	`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中直接直接写对应值会导致解析失败

错误写法
正确写法

thymeleaf里面*{}，@{}，${}的用法相关推荐

thymeleaf的常见用法
1,th:属性名="",就可以直接修改控件的属性,比如 <input th:type="button" th:name="xinxin" ...
ModelAndView绑定数据模型配合Thymeleaf渲染数据用法学习
分开介绍,大致说一下ModelAndView ModelAndView是Spring MVC里面重要的组成部分.分为两部分Model和View,Model是后端的返回值,View指的视图.先回忆一下当 ...
Thymeleaf 模板引擎用法
学习.改良.极致博客园首页新随笔联系管理订阅随笔- 31 文章- 0 评论- 50 Thymeleaf 常用属性文章主目录 th:action th:each th:field ...
springboot页面模板thymeleaf的简单用法
thymeleaf基础语法: 变量输出与字符串操作: th:text 表示在页面输出值 th:value 表示将一个值放入input标签的value中判断字符串是否为空: thymele ...
StringBoot（模板 Thymeleaf 高阶用法）
内联 [ [ ] ] 内联⽂本:[ [-] ] 内联文本的表示方式,使⽤时,必须先⽤th:inline="text/javascript/none" 激活,th:inline 可以 ...
thymealf 高级用法_史上最详 Thymeleaf 使用教程
前言操作前建议先参考我的另一篇博客:玩转 SpringBoot 2 快速整合 | Thymeleaf 篇查看如何在SpringBoot 中使用 Thymeleaf.还有一点需要注意的是:模版页面中 ...
java 模板引擎_极简 Spring Boot 整合 Thymeleaf 页面模板
点击"牧码小子"关注,和众多大牛一起成长! 关注后,后台回复 java ,领取松哥为你精心准备的技术干货! 虽然现在慢慢在流行前后端分离开发,但是据松哥所了解到的,还是有一些公司在 ...
java 模板引擎_SpringBoot入门系列（四）如何整合Thymeleaf模板引擎
前面介绍了Spring Boot的优点,然后介绍了如何快速创建Spring Boot 项目.不清楚的朋友可以看看之前的文章:https://www.cnblogs.com/zhangweizhong/ ...
thymeleaf取model值_史上最详 Thymeleaf 使用教程
点击上方"桌前明月",可以关注我偶. 前言操作前建议先参考我的另一篇博客:玩转 SpringBoot 2 快速整合 | Thymeleaf 篇查看如何在SpringBoot 中 ...
springboot嵌入thymeleaf后css404_SpringBoot2整合Thymeleaf
前言什么是Thymeleaf Thymeleaf是适用于Web和独立环境的现代服务器端Java模板引擎. Thymeleaf的主要目标是为您的开发工作流程带来优雅的自然模板 -HTML可以在浏览器中 ...

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

thymeleaf里面*{}，@{}，${}的用法相关推荐

最新文章

热门文章