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

時間 2019-11-11

標籤 thymeleaf 屬性 text utext href 欄目 HTML 简体版

原文原文鏈接

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="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中使用)javascript

<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（非轉義文本：unescaped text）

e.g.（想要輸出轉義字符效果）

home.welcome=Welcome to our <b>fantastic</b> grocery store!

執行此模板，默認使用來解析，結果爲：

<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}">Welcome to our grocery store!</p>

等效於html：

Welcome to our fantastic grocery store!

3.3 th:href

@{xxx} ：連接url的表達式

<a href="details.html" th:href="@{/order/details(orderId=${o.id})}">view</a>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

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

th:*使用緣由：

3.1 th:text

3.2 th:utext（非轉義文本：unes​​caped text）

3.3 th:href

3.2 th:utext（非轉義文本：unescaped text）