標籤:back block class onclick eval set should cape 模式
th:*使用原因:
- for the sake of simplicity and compactness of the code samples(簡化代碼)
- the
th:*
notation is more general and allowed in every Thymeleaf template mode (XML
, TEXT
…)(th:*在多個模板模式裡更為通用且允許)
常用th標籤都有那些?關鍵字 功能介紹 案例th:id 替換id <input th:id="‘xxx‘ + ${collect.id}"/>th:text 文本替換 <p th:text="${collect.description}">description</p>th:utext 支援html的文本替換 <p th:utext="${htmlcontent}">conten</p>th:object 替換對象 <div th:object="${session.user}">th:value 屬性賦值 <input th:value="${user.name}" />th:with 變數賦值運算 <div th:with="isEven=${prodStat.count}%2==0"></div>th:style 設定樣式 th:style="‘display:‘ + @{(${sitrue} ? ‘none‘ : ‘inline-block‘)} + ‘‘"th:onclick 點擊事件 th:onclick="‘getCollect()‘"th:each 屬性賦值 tr th:each="user,userStat:${users}">th:if 判斷條件 <a th:if="${userId == collect.userId}" >th:unless 和th:if判斷相反 <a th:href="@{/login}" th:unless=${session.user != null}>Login</a>th:href 連結地址 <a th:href="@{/login}" th:unless=${session.user != null}>Login</a> />th:switch 多路選擇 配合th:case 使用 <div th:switch="${user.role}">th:case th:switch的一個分支 <p th:case="‘admin‘">User is an administrator</p>th:fragment 布局標籤,定義一個程式碼片段,方便其它地方引用 <div th:fragment="alert">th:include 布局標籤,替換內容到引入的檔案 <head th:include="layout :: htmlhead" th:with="title=‘xx‘"></head> />th:replace 布局標籤,替換整個標籤到引入的檔案 <div th:replace="fragments/header :: title"></div>th:selected selected選擇框 選中 th:selected="(${xxx.id} == ${configObj.dd})"th:src 圖片類地址引入 <img class="img-responsive" alt="App Logo" th:src="@{/img/logo.png}" />th:inline 定義js指令碼可以使用變數 <script type="text/javascript" th:inline="javascript">th:action 表單提交的地址 <form action="subscribe.html" th:action="@{/subscribe}">th:remove 刪除某個屬性 <tr th:remove="all"> 1.all:刪除包含標籤和所有的孩子。 2.body:不包含標記刪除,但刪除其所有的孩子。 3.tag:包含標記的刪除,但不刪除它的孩子。 4.all-but-first:刪除所有包含標籤的孩子,除了第一個。 5.none:什麼也不做。這個值是有用的動態評估。th:attr 設定標籤屬性,多個屬性可以用逗號分隔 比如 th:attr="[email protected]{/image/aa.jpg},title=#{logo}",此標籤不太優雅,一般用的比較少。
3.1 th:text可對錶達式或變數求值,並將結果顯示在其被包含的 html 標籤體內替換原有html文本。文本連結: 用 "+" 符號,若是Variant 運算式也可以用“|”符號eg.
<p th:text="#{home.welcome}">Welcome to our grocery store!</p>
equals.(局限:只能在html5中使用)
<p data-th-text="#{home.welcome}">Welcome to our grocery store!</p>
- The
th:text
attribute, which evaluates its value expression and sets the result as the body of the host tag, effectively replacing the “Welcome to our grocery store!” text we see in the code.(th:text屬性,他聲明設定運算式的值,並使運算式返回的值來填充標籤內容,替換或設定標籤內部的內容,當前例子中即替換“歡迎光臨本店”這些字。)
- The
#{home.welcome}
expression, specified in the Standard Expression Syntax, instructing that the text to be used by the th:text
attribute should be the message with the home.welcome
key corresponding to whichever locale we are processing the template with.(#{home.welcome}運算式,一個標準的運算式文法,指出在模板中,th:text屬性所對應Message的key,即使用home.welcome對應的value替換現有內容。)
3.2 th:utext(非轉義文本:unes??caped text)e.g.(想要輸出逸出字元效果)
home.welcome=Welcome to our <b>fantastic</b> grocery store!
執行此模板,預設使用<p th:text="#{home.welcome}"></p>來解析,結果為:
<p>Welcome to our <b>fantastic</b> grocery store!</p>
解決方案:(This is the default behaviour of the
th:text
attribute. If we want Thymeleaf to respect our HTML tags and not escape them, we will have to use a different attribute:
th:utext
(for “unescaped text”):)
使用<p th:utext="#{home.welcome}"></p>即可。
<p th:utext="#{home.welcome}">Welcome to our grocery store!</p>
等效於html:<p>Welcome to our <b>fantastic</b> grocery store!</p>
3.3 th:href@{xxx} :連結url的運算式
<a href="details.html" th:href="@{/order/details(orderId=${o.id})}">view</a>
(五)Themeleaf的 th:* 屬性之—— th: ->text& utext& href