Thymleafテンプレート - オペレーションのサンセット

<!DOCTYPE HTML>
<HTMLのxmlns:目= "http://www.thymeleaf.org">
<ヘッド>
<メタコンテンツ= "text / htmlの;のcharset = UTF-8" />
<タイトル>テストページ</ TITLE>
</ head>の
<身体>
    
        
</ BODY>
</ HTML>
thymleaf.html(基本テンプレート)
<リンク番目:HREF =「@ {/ CSS / bootstrap.min.css}」REL =「スタイルシート」/> 
パス静的以下リソースに対するもの、またはコンテキスト相対パスを宣言する
リソース参照
/普通/ baseCommonパスに対してtemplete、baseCommon.html、トップファイルがbaseCommon.html番目である:断片に対応する値は、HTMLに複数のテンプレートを含んでいてもよいです
実際のページ
<divの目:置き換える= "〜{/共通/ baseCommon ::トップ}"> </ div>

テンプレートページ
<divの目:フラグメント=「トップ」クラス =「ナビゲーションバーナビゲーションバーに固定されたトップ」スタイル=「背景:#1186CB;」>
XXXX
</ div>
公開ページ
目:含めると目:置き換え、違いを置き換えるだけ負荷が含まれ、交換してください
1  遍历
 2 <TR クラス = "奇数gradeX"番目の各= "項目:$ {アイテム}">
 3          <TD目:テキスト= "$ {アイテム.count}"> </ TD>
 4 </ TR>
 5  判断
 6 <a th: 場合 ="${session!=nullとsession.USER!=null}" th:text="${session.USER.realname}">
番目のセグメント
1 <TR番目:各= "収集、iterStat:$ {収集}"> 
 2       <TH範囲= "行"目:テキスト= "$ {collect.id}"> 1 </番目>
 3       <TD>
 4          < IMG番目:SRC = "$ {collect.webLogo}" />
 5       </ TD>
 6       <TD目:テキスト= "$ {collect.url}">マーク</ TD>
 7       <TD目:テキスト= "$ {collect.title} ">オットー</ TD>
 8       <TD目:テキスト=" $ {collect.description} "> @ MDO </ TD>
 9       <TD目:テキスト=" $ {terStat.index} ">インデックス</ TD>
 10   </ TR>
。11  :iterStat属性、状態変数と呼ばれる
 12は 
13である インデックスは:現在の反復インデックスにオブジェクト(0から数えて)
 14  COUNTは:現在の反復インデックス(1から始まる計算)内のオブジェクト
 15 サイズ:オブジェクトの大きさが繰り返される
 16  電流:現在の反復変数を
 17偶数/奇数:現在の周期が偶数/であるかどうかを示すブール値、奇数(0から数えて)
 18は まず:ブール値、現在のサイクルが最初のものであるかどうか
 。19ラスト:ブール値は、現在のサイクルが最後であります
forループ

組み込み変数

  • 日付:  java.util.Dateクラスの関数法。
  • カレンダー:  同様#dates、java.util.Calendarのフェーシング
  • 番号:  クラスのデジタル機能をフォーマット
  • 文字列:  Stringオブジェクト機能クラスが含まれ、startWiths、同様に追加/先頭に付加します。
  • オブジェクト:  オブジェクト上の操作の機能クラス。
  • bools:  ブール値メソッドは、関数値を必要としていました。
  • 配列:機能クラスメソッドアレイ。
  • リスト:  機能クラスリストメソッドについて
  • セット
  • マップ
$ {#1 dates.format(日付、 'DD / MMM / YYYY HH:MM' )}
$ {#dates.arrayFormat(datesArray、 'DD / MMM / YYYY HH:MM' )}
$ {#dates.listFormat(datesList、 'DD / MMM / YYYY HH:MM' )}
$ {#dates.setFormat(datesSet、 'DD / MMM / YYYY HH:MM' )}
$ {#dates.createNow()}
$ {#dates.createToday()}

$ {#strings.isEmpty(名)}
$ {#strings.arrayIsEmpty(nameArr)}
$ {#strings.listIsEmpty(変数群)}
$ {#strings.setIsEmpty(名前セット)}
$ {#strings.startsWith(名前、 'ドン・')} // また、配列、リスト*セット* 
$ {#strings.endsWith(名前、endingFragment)} // また、アレイ*、*リストやセット* 
$ {# strings.length(STR)}
$ {#1 strings.equals(STR)}
$ {#strings.equalsIgnoreCase(STR)}
$ {#1 strings.concat(STR)}
$ {#1 strings.concatReplaceNulls(STR)}
$ {#strings.randomAlphanumeric(数)}
組み込み変数
<P番目:のutext = "$ {article.content}"> </ P>  - > <P>私の名前は、<B> maliming </ B> </ P>であります
表示オブジェクト--html(のutext)
<DIV番目:スイッチ = "$ {user.name}">

    <P TH:ケース = "maliming">最初</ P> $ {user.name}はそうでなければ、表示した値をmaliming場合、

    <P番目:ケース = "$ {otherUser.name}">第二</ P>

</ div>
目:スイッチ
<スクリプト言語= "javascriptの"タイプ= "テキスト/ javascriptの"番目:インライン= "javascriptの"> 
    VARメッセージ = [[$ {goods.goodsContent}]]。
</ SCRIPT>
JS値
1 <SELECT>
 2  
3。      <THオプション:選択= "$ {$ {otherUser.name user.name}} =="> </オプション>これはデフォルトでチェックされている場合<オプション> </オプション>に等しい
 4。 
5。 </選択>
目:選択した値を選択するための選択設定ボックス

 

キーワード 特長 ケース
目:ID IDを交換してください <input th:id="'xxx' + ${collect.id}"/>
目:テキスト テキスト置換 <p th:text="${collect.description}">description</p>
目:のutext サポートHTMLテキスト置換 <p th:utext="${htmlcontent}">conten</p>
目:オブジェクト オブジェクトの交換 <div th:object="${session.user}">
目:値 プロパティの割り当て <input th:value="${user.name}" />
目:付き 変数代入演算子 <div th:with="isEven=${prodStat.count}%2==0"></div>
目:スタイル スタイルを設定します th:style="'display:' + @{(${sitrue} ? 'none' : 'inline-block')} + ''"
目:onclickの Clickイベント th:οnclick="'getCollect()'"
目:各 プロパティの割り当て tr th:each="user,userStat:${users}">
第ます。if 条件を決定 <a th:if="${userId == collect.userId}" >
目:ない限り、 そして目:反対の決意場合 <a th:href="@{/login}" th:unless=${session.user != null}>Login</a>
目:HREF リンクアドレス <a th:href="@{/login}" th:unless=${session.user != null}>Login</a> />
目:スイッチ ケースの使用:番目とマルチプレクサ <div th:switch="${user.role}">
目:ケース 目:スイッチのブランチ <p th:case="'admin'">User is an administrator</p>
目:フラグメント [レイアウト]タブには、スニペットを定義し、他の場所で便利な引用しました <div th:fragment="alert">
目:含めます ファイルの内容を置き換えるために導入された[レイアウト]タブ、 <head th:include="layout :: htmlhead" th:with="title='xx'"></head> />
目:置き換えます [レイアウト]タブでは、タグ全体のファイルを置き換えるために導入しました <div th:replace="fragments/header :: title"></div>
目:選択しました 選択マーキーで選択 th:selected="(${xxx.id} == ${configObj.dd})"
目:SRC 絵のカテゴリはアドレスを導入しました <img class="img-responsive" alt="App Logo" th:src="@{/img/logo.png}" />
細い線 jsのスクリプトは、変数の定義を使用することができます <script type="text/javascript" th:inline="javascript">
目:アクション 住所フォームの送信 <form action="subscribe.html" th:action="@{/subscribe}">
目:削除 プロパティを削除します。 <tr th:remove="all"> 1.all:删除包含标签和所有的孩子。2.body:不包含标记删除,但删除其所有的孩子。3.tag:包含标记的删除,但不删除它的孩子。4.all-but-first:删除所有包含标签的孩子,除了第一个。5.none:什么也不做。这个值是有用的动态评估。
目:ATTR ラベル属性セット、複数の属性はコンマで分離することができます 例えば  th:attr="src=@{/image/aa.jpg},title=#{logo}"、このラベルはあまりエレガントで、あまり一般的な使用です。

おすすめ

転載: www.cnblogs.com/yuanzessrs/p/11823518.html