(六)Thymeleaf的 th:* 屬性之—— th: ->text& utext& href


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 (XMLTEXT…)(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="src=@{/image/aa.jpg},title=#{logo}",此標簽不太優雅,一般用的比較少。

3.1 th:text

可對表達式或變量求值,並將結果顯示在其被包含的 html 標簽體內替換原有html文本。
文本鏈接: 用 "+" 符號,若是變量表達式也可以用“|”符號
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 &lt;b&gt;fantastic&lt;/b&gt; 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>

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM