thymeleaf_ZenDei技術網路在線

1、通過${}來獲取model中的變數，註意這不是el表達式，而是ognl表達式，但是語法非常像 <h2 th:object="${user}"> Name: Jack. Age: <span th:text="*{a ...

1、通過${}來獲取model中的變數，註意這不是el表達式，而是ognl表達式，但是語法非常像

<h2 th:object="${user}">
    <p>Name: <span th:text="*{name}">Jack</span>.</p>
    <p>Age: <span th:text="*{age}">21</span>.</p>
    <p>friend: <span th:text="*{friend.name}">Rose</span>.</p>
</h2>

<h2 th:object="${user}">
    <p>FirstName: <span th:text="*{name.split(' ')[0]}">Jack</span>.</p>
    <p>LastName: <span th:text="*{name.split(' ')[1]}">Li</span>.</p>
</h2>

<span th:text="${#dates.format(today,'yyyy-MM-dd')}">2018-04-25</span>

<span th:text="'thymeleaf'">template</span> //字元串常量值

2、判斷

<div th:if="true">
    當條件為true則顯示。
</div>

<div th:unless ="false">
    當條件為false 則顯示
</div>

3、進行文本替換

<span th:text="你好"></span>  //不會解析html
<span th:text="你好"></span>  //會解析html

4、switch使用

<div th:switch="${user.name}">
      <p th:case="'ljk'">User is  ljk</p>
      <p th:case="ljk1">User is ljk1</p>
</div>

5、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>

6、屬性設置

//用於聲明在標簽上class 屬性信息(th:class)
<p th:class=" 'even'? 'even' : 'odd'" th:text=" 'even'? 'even' : 'odd'"></p> 

//用於聲明html中或自定義屬性信息(th:attr)
<img  th:attr="src=@{/images/gtvglogo.png}" /> 輸出為<img src="/sbe/images/gtvglogo.png">

//用於聲明html中value屬性信息(th:value)
<input type="text" th:value="${name}" />

//用於聲明html from標簽中action屬性信息(th:action)
<form action="subscribe.html" th:action="@{/subscribe}">
       <input type="text" name="name" value="abc"/>
</form>
輸出結果：
<form action="/sbe/subscribe">
       <input type="text" name="name" value="abc">
</form>

//用於聲明htm id屬性信息(th:id)
<p th:id="${id}"></p>
輸出結果：
<p id="123"></p>

//用於聲明htm 中的onclick事件(th:onclick)
<script type="text/javascript">
    function showUserInfo(){
        alert("i am zhuoqianmingyue!")
    }
</script>

<body>
   <p th:onclick="'showUserInfo()'">點我</p>
</body>

//用於聲明htm 中的selected屬性信息(th:selected)
<select>
    <option name="sex"></option>
    <option th:selected="1 == ${sex}">男</option>
    <option th:selected="0 == ${sex}">女</option>
</select>
輸出結果：
<select>
<option name="sex"></option>
    <option selected="selected">男</option>
    <option>女</option>
</select>

//用於thymeleaf 模版頁面中局部變數定義的使用(th:with)
<p th:with="df='dd/MMM/yyyy HH:mm'">
        Today is: <span th:text="${#dates.format(today,df)}">13 February 2011</span>
    </p>

<div th:with="firstEle=${users[0]}">
    <p>
        第一個用戶的名稱是： <span th:text="${firstEle.name}"></span>.
    </p>
</div>

7、Elvis運算符

//Elvis運算可以理解成簡單的判斷是否為null的三元運算的簡寫，如果值為nullzhe顯示預設值，如果不為null 則顯示原有的值
<p>Age: <span th:text="${age}?: '年齡為nll'"></span></p>

8、三元表達式

//我們可以在thymeleaf 的語法中使用三元表達式 具體使用方法是在th:x 中通過 表達式？1選項：2選項
<p th:class=" 'even'? 'even' : 'odd'" th:text=" 'even'? 'even' : 'odd'"></p>
<p th:value="${name eq 'ljk' ? '帥哥':'醜男'}" th:text="${name eq 'ljk' ? '帥哥':'醜男'}"></p>

9、Elvis運算符

//一種特殊簡寫操作，當顯示的值為null 是就什麼都不做
<span th:text="${name} ?: _">no user authenticated</span>

10、如何使用內連操作

我們可以通過 在父標簽聲明 th:inline="text" 來開啟內聯操作。當然如果想整個頁面使用可以直接聲明在body上即可。具體使用方式如下麵代碼所示。
<div th:inline="text">
<p>Hello, [[${user.name}]]!</p>
</div>
等同於：
<div>
<p>Hello,zhuoqianmingyue!</p>
</div>

[[...]]對應於th:text，[(...)]對應於th:utext

11、禁用內聯操作

這我們可以通過在父標簽或者本標簽上聲明th:inline="none"來禁用內聯的操作，如下麵代碼所示：
模版頁面

12、JavaScript內聯

如果我們想在JavaScript 中使用內聯操作，需要在 script 標簽上聲明 th:inline="javascript" 然後我們就可以 script 標簽中使用內聯操作了。具體使用方式如下麵代碼所示：
<script th:inline="javascript">
    var username = [[${user.name}]];
</script>

<script th:inline="javascript">
    var username = "zhuoqianmingyue";
</script>

13、CSS內聯

設我們將兩個變數設置為兩個不同的String值：
classname = 'main elems'
align = 'center'
我們可以像以下一樣使用它們：
<style th:inline="css">
    .[[${classname}]] {
      text-align: [[${align}]];
    }
</style>

14、定義footer.html頁面該頁面就是我們的引用片段代碼

定義footer.html頁面 該頁面就是我們的引用片段代碼
<body>
    <div th:fragment="copy">
        &copy; 2011 The Good Thymes Virtual Grocery
    </div>
</body>
定義引用頁面 index.html
<div th:insert="~{footer :: copy}"></div>
通過 th:insert 和 ~{...}片段引用表達式 進行引入footer.html中定義的片段

通過id屬性來聲明片段
<body>
<div id="copy-section" >
    &copy; 2011 The Good Thymes Virtual Grocery
</div>
</body>

<div th:insert="~{footer :: #copy-section}"></div>

15、th:insert和th:replace（和th:include）之間的區別

th:insert 是最簡單的：他會將使用th:insert的標簽 和引用片段的內容都顯示出來
th:replace 插入引用片段的標簽和內容
th:include類似於th:insert，只插入此片段的內容。
<body>
<footer th:fragment="copy">
  &copy; 2011 The Good Thymes Virtual Grocery
</footer>
</body>

<div th:insert="footer2 :: copy"></div>
<div th:replace="footer2 :: copy"></div>
<div th:include="footer2:: copy"></div>

輸出結果：
<div>
<footer>
  ? 2011 The Good Thymes Virtual Grocery
</footer>
</div>

<footer>
  ? 2011 The Good Thymes Virtual Grocery
</footer>

<div>
  ? 2011 The Good Thymes Virtual Grocery
</div>

16、帶參數的引用片段

<body>
<div th:fragment="frag (onevar,twovar)">
    <p th:text="${onevar} + ' - ' + ${twovar}">...</p>
</div>
</body>

<body>
    <div th:insert="footer :: frag('a','b')"></div>
</body>

17、用th:remove="all" 刪除模版片段

 <tr class="odd" th:remove="all">
    <td>Blue Lettuce</td>
    <td>9.55</td>
    <td>no</td>
    <td>
      <span>0</span> comment/s
    </td>
  </tr>

all：刪除包含標記及其所有子標記。
body：不要刪除包含標記，但刪除其所有子標記。
tag：刪除包含標記，但不刪除其子項。
all-but-first：刪除除第一個之外的所有包含標記的子項。
none： 沒做什麼。此值對於動態評估很有用。

18、#dates

處理日期數據 生成，轉換，獲取日期的具體天數 年數。
format操作
<span th:text="${#dates.format(date)}">4564546</span>
獲取日期屬性操作
<p th:text="${#dates.day(date)} "></p>
生成日期操作
<p th:text="${#dates.createNow()}"></p>
#numbers
處理數字數據的轉換。包括:
對不夠位數的數字進行補0（formatInteger ）<p th:text="${#numbers.formatInteger('123',4)}"></p> 輸出<p>0123</p>
設置千位分隔符（formatInteger）<p th:text="${#numbers.formatInteger('1000',2,'POINT')}"></p> 輸出：<p>1.000</p>
精確小數點（formatDecimal ）<p th:text="${#numbers.formatDecimal('10.123',3,2)}"></p> 輸出：<p>010.12</p>
錢顯示符號操作 <p th:text="${#numbers.formatCurrency('1000')}"></p> 輸出：<p>￥1,000.00</p>
設置百分號（formatPercent ）<p th:text="${#numbers.formatPercent('0.2',2, 4)}"></p> 輸出：<p>20.0000%</p>
生成數組（sequence ）：
<div th:each="num : ${#numbers.sequence(0,4)}" >
          <p th:text="${num}"></p>
</div>

輸出：
<div><p>0</p></div>
<div><p>1</p></div> 
<div><p>2</p></div>
<div><p>3</p></div>
<div><p>4</p></div>

19、#strings

處理String的相關操作，包括:
字元串轉換（toString）
檢查字元串是否為空（isEmpty）
字元串是為空替換操作（defaultString）
檢查字元串中是否包含某個字元串（contains containsIgnoreCase）
檢查字元串是以片段開頭還是結尾（startsWith endsWith）
截取（substring substringAfter）
替換（replace）
追加（prepend append）
變更大小寫（toUpperCase toLowerCase）
拆分和組合字元串（arrayJoin arraySplit）
去空格（trim）
縮寫文本（abbreviate）
字元串連接（concat）

20、#bools

判斷對象是否為ture或者是否為false的操作。
數字 1 為 ture , 0 為 false;
"on" 為 true, "off" 為false;
"true" 為true, "false"為 false;

<p th:text="${#bools.isTrue(1)} "></p> 輸出結果：<p>true</p>

21、#arrays

處理數組的相關操作的內置對象，包含：
轉換數組 toStringArray toIntegerArray，
獲取數組的長度（length ），
判斷數組是否為空（isEmpty ）
是否包含某個元素（contains）
是否包含一批元素（containsAll）

22、#lists

計算長度(size)
檢查list是否為空(isEmpty)
檢查元素是否包含在list中(contains,containsAll)
對給定list的副本排序(sort)

23、#sets

轉換為Set(toSet)
計算長度(size)
檢查set是否為空(isEmpty)
檢查元素是否包含在set中 (contains,containsAll)

24、#maps

計算長度(size)
檢查map是否為空(isEmpty)
檢查映射中是否包含鍵或值(containsKey,containsAllKeys,containsValue)

25、#aggregates

用戶處理集合或者數組的一些統計操作，包括：
求和(sum)
求平均值(avg)
處理包裝類型或基本類型的數組或集合