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

來源:互聯網
上載者:User

標籤: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 (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="[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 &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>

 

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

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.