(七)Thymeleaf的 th:* 屬性之—— th: ->設值& 遍歷迭代& 條件判斷


3.4 屬性值的設置

3.4.1 使用th:attr來設置屬性的值

<form action="subscribe.html" th:attr="action=@{/subscribe}">
  <fieldset>
    <input type="text" name="email" />
    <input type="submit" value="Subscribe!" th:attr="value=#{subscribe.submit}"/>
  </fieldset>
</form>

設置多個屬性值:

<img src="../../images/gtvglogo.png" 
     th:attr="src=@{/images/gtvglogo.png},title=#{logo},alt=#{logo}" />

會的多的不一定會的精,th:attr 雖然可以設置很多屬性值,但其設置屬性值非常不規范不美觀,不建議使用。(這點很像全棧工程師的尷尬地位,你雖然都能做,但很多公司招聘的時候還是前后端分開來招)。可以使用其他th:*屬性,其任務是設置特定的標記屬性(而不僅僅是任何屬性th:attr)。

   

3.4.2 一次性設置值相同的屬性

有兩個叫比較特殊的屬性th:alt-titleth:lang-xmllang可用於同時設置兩個屬性相同的值。特別:

  • th:alt-title將設置alttitle
  • th:lang-xmllang將設置langxml:lang
eg.
<img src="../../images/gtvglogo.png" 
     th:src="@{/images/gtvglogo.png}" th:alt-title="#{logo}" />

equals.

<img src="../../images/gtvglogo.png" 
     th:src="@{/images/gtvglogo.png}" th:title="#{logo}" th:alt="#{logo}" />

3.4.3 Appending and prepending(附加和前綴)

th:attrappend    th:attrprepend  (append (suffix) or prepend (prefix) the result of their evaluation to the existing attribute values)

th:attrappend屬性值前綴,例如一個標簽的類名為a,想要變為“a b”,即增加一個類樣式,可以使用此屬性.

<!--將要添加的CSS類的名稱(未設置,剛添加)存儲到上下文變量中的一個按鈕中,因為要使用的特定CSS類將取決於用戶所做的某些操作之前-->
<input type="button" value="Do it!" class="btn" th:attrappend="class=${' ' + cssStyle}" />
 還有:th:classappend    th:styleappend (used for adding a CSS class or a fragment of  style to an element without overwriting the existing ones)
<!--向元素添加CSS類或樣式片段,而不覆蓋現有元素-->
<tr th:each="prod : ${prods}" class="row" th:classappend="${prodStat.odd}? 'odd'">

3.4.4 布爾值屬性(屬性值為布爾值)

以th:checked為例,選中為true,未選中為false,thymeleaf解析時不會設置th:checked屬性。

<input type="checkbox" name="active" th:checked="true" />  選中

  

3.5 th:each

循環/迭代
e.g.
  <table>
      <tr>
        <th>NAME</th>
        <th>PRICE</th>
        <th>IN STOCK</th>
      </tr>
      <tr th:each="prod : ${prods}">
        <td th:text="${prod.name}">Onions</td>
        <td th:text="${prod.price}">2.41</td>
        <td th:text="${prod.inStock}? #{true} : #{false}">yes</td>
      </tr>
    </table>
Note:  1.prod局部變量只在被其包含的<tr>標簽和子標簽中可用; 2.迭代的對象可以是 java.util.List,java.util.Map,數組等;
狀態變量
<tr th:each="prod,iterStat : ${prods}" th:class="${iterStat.odd}? 'odd'">
    <td th:text="${prod.name}">Onions</td>
    <td th:text="${prod.price}">2.41</td>
    <td th:text="${prod.inStock}? #{true} : #{false}">yes</td>
  </tr>

iterStat稱作狀態變量,屬性有:

  • index: 當前迭代對象的index(從0開始計算)   
  • count:  當前迭代對象的index(從1開始計算)   
  • size: 被迭代對象的大小     current:當前迭代變量   
  • even/odd: 布爾值,當前循環是否是偶數/奇數(從0開始計算)   
  • first: 布爾值,當前循環是否是第一個   
  • last: 布爾值,當前循環是否是最后一個
<ol>  
        <li>List循環:  
            <table border="1">  
              <tr>  
                <th>用戶名</th>  
                <th>郵箱</th>  
                <th>管理員</th>  
                <th>狀態變量:index</th>  
                <th>狀態變量:count</th>  
                <th>狀態變量:size</th>  
                <th>狀態變量:current.userName</th>  
                <th>狀態變量:even</th>  
                <th>狀態變量:odd</th>  
                <th>狀態變量:first</th>  
                <th>狀態變量:last</th>  
              </tr>  
              <tr  th:each="user,userStat : ${list}">  
                <td th:text="${user.userName}">Onions</td>  
                <td th:text="${user.email}">test@test.com.cn</td>  
                <td th:text="${user.isAdmin}">yes</td>  
                 <th th:text="${userStat.index}">狀態變量:index</th>  
                <th th:text="${userStat.count}">狀態變量:count</th>  
                <th th:text="${userStat.size}">狀態變量:size</th>  
                <th th:text="${userStat.current.userName}">狀態變量:current</th>  
                <th th:text="${userStat.even}">狀態變量:even****</th>  
                <th th:text="${userStat.odd}">狀態變量:odd</th>  
                <th th:text="${userStat.first}">狀態變量:first</th>  
                <th th:text="${userStat.last}">狀態變量:last</th>  
              </tr>  
            </table>  
        </li>  
        <li>Map循環:  
            <div th:each="mapS:${map}">  
            <div th:text="${mapS}"></div>  
            </div>  
        </li>  
        <li>數組循環:  
            <div th:each="arrayS:${arrays}">  
            <div th:text="${arrayS}"></div>  
            </div>  
        </li>  
        </ol> 

3.6 條件判斷

3.6.1 th:if   th:unless 

①th:if使用

<a href="comments.html"
   th:href="@{/product/comments(prodId=${prod.id})}" 
   th:if="${not #lists.isEmpty(prod.comments)}">view</a>
th:if 支持下列規則判斷:
<1>值不為null:      
<1.1>布爾類型且為true;          
<1.2>非0數字;      
<1.3>非0字符;          
<1.4>非“false”, “off” or “no”字符串;          
<1.5>判斷值不為布爾值,數字,字符,字符串         
結果為true
<2>值為null,結果為false

② th:unless

<a href="comments.html"
   th:href="@{/comments(prodId=${prod.id})}" 
   th:unless="${#lists.isEmpty(prod.comments)}">view</a>

3.6.2 th:switch   th:case

<div th:switch="${user.role}">
  <p th:case="'admin'">User is an administrator</p>
  <p th:case="#{roles.manager}">User is a manager</p>
</div>
① 一旦有一個th:case對應結果為true,其他均為false;
② 默認值語法為:  th:case=”*”
 


免責聲明!

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



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