Tyhmeleaf常用語法
阿新 • • 發佈:2020-07-25
<!DOCTYPE html> <html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro"> <head> <th:block th:include="include :: header('Thymeleaf常用語法')" /> </head> <body class="gray-bg"> <div class="row"> <div class="col-sm-12"> <div class="ibox float-e-margins"> <div class="ibox-title"> <h5>Thymeleaf常用語法</h5> </div> <div class="ibox-content"> <div class="panel-body"> <div class="panel-group" id="accordion"> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#bdsyfzysf">1、表示式語法之運算子</a> </h4> </div> <div id="bdsyfzysf" class="panel-collapse collapse" th:with="year=2019"> <div class="panel-body" th:with="result=true"> <p class="text-danger">表示式常量</p> <ul> <li> <p><strong>字串常量</strong> - <span th:text="'hello , word'"></span></p> </li> <li> <p><strong>數字常量</strong> - <span th:text="2019 + 2"></span></p> </li> <li> <p><strong>布林值常量</strong> - <span th:text="${result}"></span></p> </li> <li> <p><strong>空值常量</strong> - <span th:text="${result == null}"></span></p> </li> </ul> <p class="text-danger">字串拼接</p> <ul> <li> <p><strong>方法一</strong> - <span th:text="${#strings.append('abc', 'd')}"></span></p> </li> <li> <p><strong>方法二</strong> - <span th:text="${#strings.concat('abc', 'd')}"></span></p> </li> <li> <p><strong>方法三</strong> - <span th:text="${'abc' + 'd'}"></span></p> </li> <li> <p><strong>方法四</strong> - <span th:text="'abc' + 'd'"></span></p> </li> <li> <p><strong>方法五</strong> - <span th:text="abc + d"></span></p> </li> <li> <p><strong>方法六</strong> - <span th:text="|abc| + |d|"></span></p> </li> </ul> <p class="text-danger">算數運算子</p> <ul> <li> <p><strong>3 + 2 = </strong> <span th:text="${3 + 2}"></span></p> </li> <li> <p><strong>5 - 2 = </strong> <span th:text="${5 - 2}"></span></p> </li> <li> <p><strong>5 * 2 =</strong> <span th:text="${5* 2}"></span></p> </li> <li> <p><strong>5 / 2 =</strong> <span th:text="5.0 / 2"></span></p> </li> <li> <p><strong>5 % 2 =</strong> <span th:text="5 % 2"></span></p> </li> </ul> <p class="text-danger">關係運算符</p> <ul> <li> <p><strong>1 > 1 = </strong> <span th:text="${1 gt 1}"></span></p> </li> <li> <p><strong>1 < 1 = </strong> <span th:text="${1 lt 1}"></span></p> </li> <li> <p><strong>1 >= 1 = </strong> <span th:text="${1 ge 1}"></span></p> </li> <li> <p><strong>1 <= 1 = </strong> <span th:text="${1 le 1}"></span></p> </li> <li> <p><strong>1 == 1 = </strong> <span th:text="${1 eq 1}"></span></p> </li> <li> <p><strong>1 != 1 = </strong> <span th:text="${1 ne 1}"></span></p> </li> </ul> <p class="text-danger">三目運算子</p> <ul th:with="value=ruoyi"> <li> <p><strong>方法一</strong> <span th:text="${1 != 1} ? |條件成立| : |條件不成立|"></span></p> </li> <li> <p><strong>方法二</strong> <span th:text="${value == 'ruoyi'} ? ${value} : |預設值|"></span></p> </li> <li> <p><strong>方法三(不成立返回空)</strong> <span th:text="${1 != 1} ? |條件成立|"></span></p> </li> </ul> </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#sxsz">2、屬性設定</a> </h4> </div> <div id="sxsz" class="panel-collapse collapse"> <div class="panel-body"> <p class="text-left">1、單個屬性值設定:<input type="submit" value="提交" th:attr="value=#{user.login.success}"></input></p> <p class="text-left">2、多個屬性值設定:<input type="submit" value="提交" th:attr="value=#{user.login.success},class='btn btn-primary'"></input></p> <p class="text-left">3、設定單個HTML節點屬性:<input type="submit" value="提交" th:value="#{user.login.success}"></input></p> <p class="text-left">4、設定多個HTML節點屬性:<input type="submit" value="提交" th:value="#{user.login.success}" th:class="'btn btn-primary'"></input></p> <p class="text-left">5、屬性值後面拼接:<div id="imgDiv" th:attrappend="id='-dataId'"></div></p> <p class="text-left">6、屬性值前面拼接:<div id="imgDiv" th:attrprepend="id='dataId-'"></div></p> <p class="text-left">7、屬性新增style樣式:<div style="text-align: left;" th:styleappend="'color:red'">style樣式</div></p> <p class="text-left">8、屬性新增class樣式:<div class="btn btn-primary btn-xs" th:classappend="'btn-rounded'">class樣式</div></p> </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#tjpd">3、條件判斷</a> </h4> </div> <div id="tjpd" class="panel-collapse collapse"> <div class="panel-body"> <p class="text-danger">條件判斷</p> <ul th:with="value=ruoyi"> <li> <p><strong>方法一</strong> - <span th:if="0">數字型別,如果為0,不顯示</span></p> <p><strong>方法二</strong> - <span th:if="false">false、off、no 不顯示</span></p> <select th:with="sex=1" th:switch="${sex}"> <option th:case="0">男</option> <option th:case="1">女</option> </select> </li> </ul> </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#sjdd">4、資料迭代</a> </h4> </div> <div id="sjdd" class="panel-collapse collapse"> <div class="panel-body"> <p class="text-danger">list資料迭代</p> <table> <tr th:each="user : ${users}"> <td th:text="${user.userName}"></td> </tr> </table> <p class="text-danger">map資料迭代</p> <table> <tr th:each="map : ${userMap}"> <td th:text="${map.key}"></td> <td th:text="${map.value.userName}"></td> </tr> </table> <p class="text-danger">資料狀態物件(自定義狀態物件)</p> <table class="table"> <thead> <tr> <th>使用者名稱</th> <th>從0開始的索引</th> <th>從1開始的索引</th> <th>資料集合大小</th> <th>是否第一次迭代</th> <th>是否最後一次迭代</th> <th>是否偶數次迭代</th> <th>是否奇數次迭代</th> </tr> </thead> <tbody> <tr th:each="user,state : ${users}"> <td th:text="${user.userName}"></td> <td th:text="${state.index}"></td> <td th:text="${state.count}"></td> <td th:text="${state.size}"></td> <td th:text="${state.first}"></td> <td th:text="${state.last}"></td> <td th:text="${state.even}"></td> <td th:text="${state.odd}"></td> </tr> </tbody> </table> <p class="text-danger">資料狀態物件(預設規則 節點變數名+Stat)</p> <table class="table"> <thead> <tr> <th>使用者名稱</th> <th>從0開始的索引</th> <th>從1開始的索引</th> <th>資料集合大小</th> <th>是否第一次迭代</th> <th>是否最後一次迭代</th> <th>是否偶數次迭代</th> <th>是否奇數次迭代</th> </tr> </thead> <tbody> <tr th:each="user : ${users}"> <td th:text="${user.userName}"></td> <td th:text="${userStat.index}"></td> <td th:text="${userStat.count}"></td> <td th:text="${userStat.size}"></td> <td th:text="${userStat.first}"></td> <td th:text="${userStat.last}"></td> <td th:text="${userStat.even}"></td> <td th:text="${userStat.odd}"></td> </tr> </tbody> </table> </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#xhbds">5、星號表示式</a> </h4> </div> <div id="xhbds" class="panel-collapse collapse"> <div class="panel-body"> <p class="text-danger">星號表示式</p> <table class="table"> <thead> <tr> <th>使用者ID</th> <th>使用者名稱</th> </tr> </thead> <tbody> <tr th:each="user : ${users}" th:object="${user}"> <td th:text="*{userId}"></td> <td th:text="*{userName}"></td> </tr> </tbody> </table> </div> </div> </div> </div> </div> </div> </div> </div> <th:block th:include="include :: footer" /> </body> </html>