随笔 - 3  文章 - 0  评论 - 0  阅读 - 102 

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">
        &copy; 2011 The Good Thymes Virtual Grocery
</div>
使用th:insert 和~{...}引入片段
<div th:insert="~{footer :: copy}"></div>

使用id声明片段

<div id="copy-section" >
    &copy; 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,只插入此片段的内容
th:remove 删除模板片段
posted on   INDream  阅读(30)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 百万级群聊的设计实践
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性
· 全网最简单!3分钟用满血DeepSeek R1开发一款AI智能客服,零代码轻松接入微信、公众号、小程
· .NET 10 首个预览版发布,跨平台开发与性能全面提升
· 《HelloGitHub》第 107 期
点击右上角即可分享
微信分享提示