thymeleaf基础学习

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 删除模板片段