Thymeleaf
1.标准表达式
-
${...}
:变量表达式 -
*{...}
: 选择表达式 -
#{...}
: 消息表达式 -
@{...}
: 连接表达式
<img th:src="@{url}">
~{...}
: 片段表达式
2.基础语法
文本标签 th:text/th:utext
1.th:text 进行文本替换 不会解析html
2. th:utext 进行文本替换 会解析html
th:object 获取后台传过来的对象,结合th:text来使用
<span th:object="${user}">
<p th:text="*{name}"></p>
<p th:text="*{age}"></p>
</span>
条件判断 th:if/th:/unless
<p th:if="${falg}">if判断</p>
<p th:unless="!${falg}">unless判断</p>
th:swith
<div th:switch="${user.name}">
<P th:case=" ' ' ">xxx</P>
<P th:case=" ' ' ">xx</P>
</div>
for循坏 th:each遍历集合
<tr th:each="user : ${userList}" th:class="${userStat.odd}? 'odd'">
<td th:text="${user.name}">Onions</td>
<td th:text="${user.age}">2.41</td>
</tr>
th:href 用于声明在a标签上的href属性
<a href="../home.html" th:href="@{/}">xxx</a>
th:class 用于声明在标签上属性class
<p th:class="'even' ? 'even' : 'odd'"></p>
th:addr 用于声明html中或自定义属性
<img th:addr="src=@{/images}" />
th:value 用于声明html中value属性信息
<input type="text" th:value="${name}" />
th:action 用于html form标签中action属性
<form th:action="@{/url}">
</form>
th:id 用于html id属性
<p th:id="${id}"></p>
th:onclick 用于html中的onclick事件
<p onclick="showUserInfo()">点我</p>
th:selected 用于selected属性
<select>
<option name="sex"></option>
<option th:selected="1 == ${sex}">男</option>
<option th:selected="0 == ${sex}">女</option>
</select>
th:src 用于img 中 src属性
<img th:src="@{/images}"/>
th:style 用于声明html中的css
<p th:style="'display:' + @{(${isShow} ? 'none' : 'block')} + ''"></p>
th:with 用于thymeleaf中局部变量定义的使用
<p th:with="df='dd/MMM/yyyy HH:mm'">
Today is: <span th:text="${#dates.format(today,df)}">13 February 2011</span>
</p>
Elvis运算符
? 二目运算符 a?b a为true显示a
表达式 ? a : b 三元表达式 表达式为真显示a,否则b*
条件表达式操作字符
gt:great than(大于)
ge:great equal(大于等于)
eq:equal(等于)
lt:less than(小于)
le:less equal(小于等于)
ne:not equal(不等于)
th:inline = "text" 开启内联操作
<div th:inline="text">
<p>Hello, [[${user.name}]]!</p>
</div>
th:inline="none" 禁用内联的操作
<p th:inline="none">A double array looks like this: [[1, 2, 3], [4, 5]]!</p>
模板布局
定义引用片段代码
使用th:fragment 定义引用片段
<div th:fragment="copy">
© 2011 The Good Thymes Virtual Grocery
</div>
使用th:insert 和~{...}引入片段
<div th:insert="~{footer :: copy}"></div>
使用id声明片段
<div id="copy-section" >
© 2011 The Good Thymes Virtual Grocery
</div>
引用片段
<div th:insert="~{footer :: #copy-section}"></div>
th:insert和th:replace(和th:include)之间的区别
- th:insert 是最简单的:他会将使用th:insert的标签 和引用片段的内容都显示出来
- th:replace 插入引用片段的标签和内容
- th:include类似于th:insert,只插入此片段的内容
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 百万级群聊的设计实践
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性
· 全网最简单!3分钟用满血DeepSeek R1开发一款AI智能客服,零代码轻松接入微信、公众号、小程
· .NET 10 首个预览版发布,跨平台开发与性能全面提升
· 《HelloGitHub》第 107 期