1.Thymeleaf的標(biāo)簽
? 1.1? ?th:id? ??
? ? ? ? ?替換id標(biāo)簽
<input th:id="'xxx' + ${collect.id}"/>
? 1.2? ? th:text? ?
? ? ? ? ? 文本替換始花，包括html標(biāo)簽
若home.welcome=Welcome to our <b>fantastic</b> grocery store!
用<p th:text="#{home.welcome}"></p>解析結(jié)果為：
<p>Welcome to our <b>fantastic</b> grocery store!</p>
? 1.3?th:utext? ?
? ? ? ? 文本替換月而，html標(biāo)簽會(huì)顯示出正確的樣式
<p th:utext="#{home.welcome}"></p>即可牙甫。
?? Welcome to our fantastic grocery store!
等效于html :<p>Welcome to our <b>fantastic</b> grocery store!</p>
? ?1.4?th:object?
? ?替換對(duì)象伏伐，用于表單數(shù)據(jù)對(duì)象綁定隘竭，將表單綁定到后臺(tái)controller的一個(gè)JavaBean參數(shù)渊抽。常與th:field一起使用進(jìn)行表單數(shù)據(jù)綁定达传。
public class LoginBean implements Serializable{
@RequestMapping(value = "/login", method = RequestMethod.POST)
public String login(@ModelAttribute(value = "loginBean") LoginBean loginBean，ModelMap model) {...}
}
<form id="login-form" th:action="@{/login}" th:object="${loginBean}">...</form>
1.5??th:value
屬性賦值
<input th:value = "${user.name}" />
1.6?th:with
定義局部變量劳吠。
<div th:with="firstPer=${persons[0]}">
<p>
The name of the first person is <span th:text="${firstPer.name}">Julius Caesar</span>.
</p>
</div>
當(dāng)th:with被處理,firstPer變量創(chuàng)建一個(gè)局部變量和變量添加到map自上下文,以便它是用于評(píng)估和其他上下文中聲明的變量從開(kāi)始,但只有包含< div >標(biāo)記的范圍內(nèi)引润。
定義多個(gè)局部變量
<div th:with="firstPer=${persons[0]},secondPer=${persons[1]}">
1.7 th:style
設(shè)置樣式
<div th:style="'display:' + @{(${sitrue} ? 'none' : 'inline-block')} + ''"></div>
1.8 th:onclick
點(diǎn)擊事件
<td th:onclick = "'getCollect()'"></td>
1.9 th:each
屬性賦值
<tr th:each = "user,userStat:${users}">
1.10 th:if
?判斷條件
<a th:if = "${userId}"> 如果userId不為空就執(zhí)行a標(biāo)簽
1.11 th:unless
和th:if判斷相反
<a th:href="@{/login} th:unless=${session.user != null}">Login</a>
1.12 th:href
鏈接地址
<a th:href="@{/login}" th:unless=${session.user != null}>Login</a>
1.13 th:switch
多路選擇配合th:case使用
?<div class="col-sm-9">
?<div th:switch="${channel.enable}">
<p th:case="'1'">
<input id="enable" name="enable" type="radio" class="ace" value="1" checked="checked" />
<span class="lbl">啟用</span>
<input id="enable1" name="enable" type="radio" class="ace" value="0" />
<span class="lbl">停用</span>
</p>
<p th:case="'0'">
<input id="enable2" name="enable" type="radio" class="ace" value="1" />
<span class="lbl">啟用</span>
<input id="enable3" name="enable" type="radio" class="ace" value="0" checked="checked" />
<span class="lbl">停用</span>
</p>
</div>
</div>
1.14 th:fragment
自定義片段，定義fragment痒玩，所有的fragment可以寫(xiě)在一個(gè)文件里面淳附，也可以單獨(dú)存在
??? <footer th:fragment="copy"> ?
?????? the content of footer
??? </footer>
? ?1.15? th:insert
? ?保留自己的主標(biāo)簽，保留th:fragment的主標(biāo)簽蠢古。
? 1.16? th:replace
? 不要自己的主標(biāo)簽燃观，保留th:fragment的主標(biāo)簽。
? ? 1.17 th:include
? ? 保留自己的主標(biāo)簽便瑟，不要th:fragment的主標(biāo)簽缆毁。（官方3.0后不推薦）
??? <div th:insert="footer :: copy"></div>??
??? <div th:replace="footer :: copy"></div>??
??? <div th:include="footer :: copy"></div>
??? 結(jié)果為:
??? <div> ?
??????? <footer> ?
?????????? the content of footer? ?
??????? </footer>?? ?
??? </div>? ??
??? <footer>?
??????? the content of footer
??? </footer>? ??
??? <div> ?
??????? the content of footer
??? </div>?
1.18 th:selectd
selected選擇框選中
th:selected="(${xxx.id} == ${configObj.dd})"
1.19 th:src
圖片類(lèi)地址引入
<img class="img-responsive" alt="App Logo" th:src="@{/img/logo.png}" />
1.20 th:inline
定義js腳本可以使用變量
<script type="text/javascript" th:inline="javascript">
1.21 th:action
表單提交的地址
<form action="subscribe.html" th:action="@{/subscribe}">
1.22 th:remove
刪除某個(gè)屬性
1.all:刪除包含標(biāo)簽和所有的孩子。
2.body:不包含標(biāo)記刪除,但刪除其所有的孩子到涂。
3.tag:包含標(biāo)記的刪除,但不刪除它的孩子脊框。
4.all-but-first:刪除所有包含標(biāo)簽的孩子,除了第一個(gè)颁督。
5.none:什么也不做。這個(gè)值是有用的動(dòng)態(tài)評(píng)估浇雹。
<tr th:remove="all">
1.23 th:attr
?設(shè)置標(biāo)簽屬性沉御，多個(gè)屬性可以用逗號(hào)分隔
2.Thymeleaf的表達(dá)式
$ {...}? ? 變量表達(dá)式，可用于獲取后臺(tái)傳過(guò)來(lái)的值
<p th:text="${userName}">中國(guó)</p>
?* {...} 選擇變量表達(dá)式 ?
?＃{...} 消息表達(dá)式 ?
?@ {...} 鏈接?址表達(dá)式昭灵，用于替換網(wǎng)頁(yè)中的 src吠裆、href 等的值
th:href="@{/css/home.css}"
?{...} ?段表達(dá)式，可以用于引用公共的目標(biāo)片段
<div?th:insert="~{footer :: copy}"></div>
@{...} 處理 url 地址
? ? ?Thymeleaf 的 @ {...} 表達(dá)式用于處理 web 應(yīng)用中的 url 地址烂完，可以是相對(duì)地址试疙，也可以是絕對(duì)地址。
? ? ?@{/}? 斜杠開(kāi)頭表示相對(duì)整個(gè)應(yīng)用根目錄抠蚣，"/" 表示 "/應(yīng)用上下文路徑"
? ? ?假如頁(yè)面當(dāng)前瀏覽器地址為：http://localhost/thymeleaf/user/userHome祝旷，其中 thymeleaf 表示應(yīng)用上下文路徑，user/userHome 為后臺(tái)請(qǐng)求路徑嘶窄，則常用的寫(xiě)法如下：
1）@{userList} 相對(duì)當(dāng)前路徑結(jié)果為：http://localhost/thymeleaf/user/userList
2）@{./userList} 相對(duì)當(dāng)前路徑結(jié)果為：http://localhost/thymeleaf/user/userList
3）@{../tiger/home}?相對(duì)當(dāng)前路徑結(jié)果為：http://localhost/thymeleaf/tiger/home
4）@{/tiger/home} 相對(duì)應(yīng)用根目錄結(jié)果為：http://localhost/thymeleaf/tiger/home
5）@{https://www.baidu.com/}?絕對(duì)路徑結(jié)果為：https://www.baidu.com
6）<link type="text/css" rel="stylesheet" th:href="@{/css/home.css}">怀跛，@ 以 "/" 開(kāi)頭相對(duì)應(yīng)用根目錄，否則是相對(duì)當(dāng)前路徑柄冲。
<body>
<a th:href="@{userList}">1吻谋、@{userList}</a>
<a th:href="@{./userList}">2、@{./userList}</a>
<a th:href="@{../tiger/home}">3现横、@{../tiger/home}</a>
<a th:href="@{/tiger/home}">4漓拾、@{/tiger/home}</a>
<a th:href="@{https://www.baidu.com}">5、@{https://www.baidu.com}</a>
</body>
@{...} 攜帶參數(shù)
? ? ?th:href 是?個(gè)修飾符屬性长赞，將表達(dá)式結(jié)果設(shè)置為標(biāo)簽 href 屬性的值晦攒，請(qǐng)求地址中攜帶參數(shù)傳往服務(wù)器是很常見(jiàn)的操作闽撤，常用操作如下：
<body>
<a th:href="@{userList(id=9527)}">1得哆、@{userList(id=9527)}</a>
<a th:href="@{userList(id=9527,name=華安)}">2、@{userList(id=9527,name=華安)}</a>
<a th:href="@{userList(id=9527,name=${userName})}">3哟旗、@{userList(id=9527,name=${userName})}</a>
</body>
1）在 @{...}表達(dá)式末尾使用 "()" 設(shè)置參數(shù)贩据；
2）多個(gè)參數(shù)時(shí)，使用 "," 隔開(kāi)
3）參數(shù)值可以使用表達(dá)式動(dòng)態(tài)取值闸餐。
文本及其操作
? ? ??本?字指包含在單引號(hào)之間的字符串饱亮，它們可以包含任何字符，但如果字符串有空格時(shí)舍沙，必須使用單引號(hào)" ' "包含近上。
<body>
<!--中間無(wú)空格時(shí)，可以不加單引號(hào)-->
<p th:text="China">中國(guó)</p>
<!--空格屬于特殊字符拂铡，必須使用單引號(hào)包含整個(gè)字符串-->
<p class="css1 css2" th:class="'css1 css2'">樣式</p>
<!--下面如果沒(méi)用單引號(hào) th:text="Big China"壹无，則頁(yè)面直接報(bào)錯(cuò)-->
<p th:text="'Big China'">中國(guó)</p>
<!--后臺(tái)使用：model.addAttribute("info", "Love you 中國(guó)"); 傳值有空格也是沒(méi)有問(wèn)題的-->
<p th:text="${info}">info</p>
<!--后臺(tái)傳值字符串有空格是可以的葱绒，可以使用 + 進(jìn)行字符串連接-->
<p th:text="'small smile'+',very good.'">淺淺的微笑</p>
</body>
字符串追加
? ? ??論是字符串?本常量，還是通過(guò)變量表達(dá)式或消息表達(dá)式計(jì)算的結(jié)果斗锭，都可以使? "+" 運(yùn)算符輕松地追加?本地淀。
? ? ?<span th:text="'The name of the user is ' + ${user.name}">
數(shù)字字?量
<body>
<!--直接用 80 替換-->
<p th:text="80">8</p>
<!--計(jì)算結(jié)果為 16 在進(jìn)行替換-->
<p th:text="8+8">8 + 8</p>
<!--前面 8+8 計(jì)算結(jié)果為 16，然后字符串拼接上 Love岖是，后面的 9+9也會(huì)被當(dāng)做字符串拼接-->
<p th:text="8+8+' Love '+9+9">8 + 8+' Love '+9+9</p>
<!--前面 8+8 計(jì)算結(jié)果為 16帮毁，后面的 9+9因?yàn)橛欣ㄌ?hào),所以也會(huì)計(jì)算結(jié)果，最后拼接 Love 字符串-->
<p th:text="8+8+' Love '+(9+9)">8 + 8+' Love '+(9+9)</p>
<!--后臺(tái)傳了一個(gè)：model.addAttribute("age", 35);取得結(jié)果后在進(jìn)行計(jì)算-->
<p th:text="100-${age}"></p>
</body>
布爾字?量
? ? ?布爾字?量包含 true 和 false：
<body>
<!--直接用 true 替換了標(biāo)簽體內(nèi)容-->
<p th:text="true">布爾</p>
<!--true豺撑、false 是布爾值烈疚，and 是布爾運(yùn)行符，and(與)前硫，or(或)胞得，not(非)、!(非)-->
<p th:text="true and false">true and true</p>
<!--后臺(tái)使用 model.addAttribute("isMarry", true); 傳了值-->
<!--th:if 表達(dá)式為 true屹电，則顯示標(biāo)簽內(nèi)容阶剑，否則不顯示-->
<p th:if="${isMarry}">已結(jié)婚</p>
<!--后臺(tái)傳值：model.addAttribute("age", 35);-->
<!--比較運(yùn)算符：>，<危号，> =牧愁，<=（gt，lt外莲，ge猪半，le）-->
<p th:if="${age}>18">已成年</p>
<p th:if="${age}<18">未成年</p>
</body>
NULL 字?量
<body>
<p th:text="null">show null</p>
<!--后臺(tái)傳了個(gè)值：model.addAttribute("id", null);-->
<!--當(dāng) id 的值為 null 時(shí)，整個(gè)標(biāo)簽不顯示-->
<p th:text="${id}">id</p>
<!--相等運(yùn)算符：==偷线，磨确！=（eq，ne）-->
<p th:if="${id} eq null">id 值為 null</p>
<!--后臺(tái)傳了個(gè)值：model.addAttribute("name", "");-->
<!--當(dāng) name 為空時(shí)声邦，整個(gè)標(biāo)簽不再顯示-->
<p th:text="${name}">為空</p>
<!--判斷結(jié)果為 true-->
<p th:if="${name} == ''">name 為空</p>
</body>
算術(shù)運(yùn)算符
? ? ?Thyme Leaf 標(biāo)準(zhǔn)表達(dá)式?持算術(shù)運(yùn)算：+乏奥， - ，*亥曹，/(除)邓了，％(取余)
<body>
<canvas style="background-color: #999999" th:width="100" th:height="${age} + 15">
? ? 您的瀏覽器不支持 Canvas
</canvas>
<p th:text="15 * 4">值為 60 </p>
<p th:text="15 * 4-100/10">值為 50 </p>
<p th:text="100 % 8">值為 4</p>
</body>
?較/邏輯運(yùn)算符
? ? ?表達(dá)式中的值可以與 >，<媳瞪，>= 骗炉，<= ，==蛇受，句葵！= 符號(hào)進(jìn)??較。??個(gè)更簡(jiǎn)單的替代?案是使?這些運(yùn)算符的?本別名：gt(>)，lt(<)乍丈，ge(>=)熊响，le(<=)，eq(==)诗赌，neq(汗茄！=)。
? ? ?邏輯運(yùn)算符：and(與)铭若、or(或)洪碳、！(非)叼屠，not(非)
<body>
<p th:if="5>3">5 大于 3</p>
<p th:if="5 >4">5 大于 4</p>
<p th:if="10>=8 and 7 !=8">10大于等于8瞳腌，且 7 不等于 8 </p>
<p th:if="!false">!false</p>
<p th:if="not(false)">not(false)</p>
</body>
三元運(yùn)算符
? ? ?Thymeleaf 中的三元運(yùn)算與 Java 以及 JavaScript 中基本一致，如 A>B?X:Y镜雨，在 X嫂侍、Y 中可以繼續(xù)嵌套，只是 Thymeleaf 中需要使用括號(hào)包含起來(lái)荚坞，否則報(bào)錯(cuò)挑宠。
<body>
<!--7大于5時(shí)，輸出 7大颓影，否則輸出 5大-->
<p th:text="7>5?'7大':'5大'">三元運(yùn)算符</p>
<!--后臺(tái)控制器輸出了：model.addAttribute("age", 35);-->
<!--因?yàn)?${xx}取值時(shí)各淀，如果值為null，則默認(rèn)整個(gè)標(biāo)簽不再顯示-->
<p th:text="${age}!=null?${age}:'age等于 null'"></p>
<!--這里使用嵌套判斷诡挂，嵌套的部分要使用括號(hào)-->
<p th:text="${age}!=null?(${age}>=18?'成年':'未成年'):'age等于 null'"></p>
<!--變量 age2 后臺(tái)并沒(méi)有輸出碎浇，所以 age2 不存在，此時(shí) age2 ==null-->
<p th:text="${age2}!=null?${age2}:'age2等于 null'"></p>
<!--后臺(tái)輸出了：model.addAttribute("isMarry", true);-->
<!--A>B?X:Y璃俗，這里的 Y 部分是省略的奴璃，此時(shí)如果 A>B 返回 false，則整個(gè)三元運(yùn)算結(jié)果為 null-->
<p th:class="${isMarry}?'css2'">已婚</p>
<p th:text="!${isMarry}?'css2'">已婚</p>
</body>
