thymeleaf simply uses th: text, th: each, th: ID, th: switch, th: inline

Posted by itisprasad on Tue, 08 Mar 2022 10:22:04 +0100

Reference: Thymeleaf tutorial


thymeleaf uses:


<html xmlns:th="">

thymeleaf standard expression:

thymeleaf supports multiple expressions:

  • Variable expression: ${...}
  • Select variable expression: * {...}
  • Connection expression: @ {...}
  • Internationalization expression: #{...}
  • Fragment reference expression: ~ {...}


  1. Variable expression

Use ${...} The expression of a package is called a variable expression, which has the following functions:

  • Get the properties and methods of the object
  • Use built-in base objects
  • Use built-in tool objects

Using variable expressions, you can also use built-in basic objects to obtain the properties of built-in objects and call the methods of built-in objects. The built-in basic objects commonly used in Thymeleaf are as follows:

  • #ctx: context object;
  • #vars: context variable;
  • #Locale: the locale of the context;
  • #request: HttpServletRequest object (only available in Web Applications);
  • #response: HttpServletResponse object (only available in Web Applications);
  • #session: HttpSession object (only available in Web Applications);
  • #ServletContext: ServletContext object (available only in Web Applications).

In addition to using built-in basic objects, variable expressions can also use some built-in tool objects.

  • strings: String tool object. Common methods include: equals, equalsIgnoreCase, length, trim, toUpperCase, toLowerCase, indexOf, substring, replace, startsWith, endsWith, contains and containsIgnoreCase;
  • numbers: digital tool object. Common methods include: formatDecimal, etc;
  • bools: Boolean tool object. Common methods include: isTrue and isFalse;
  • arrays: array tool object. Common methods include toArray, length, isEmpty, contains, containsAll, etc;
  • lists/sets: List/Set sets tool objects. Common methods include: toList, size, isEmpty, contains, containsAll and sort;
  • maps: Map collection tool object. Common methods include: size, isEmpty, containsKey, containsValue, etc;
  • dates: Date tool object. Common methods include format, year, month, hour and createNow.

The thymeleaf property uses:

th:text and th:utext use:

<!-- th:text by Thymeleaf Property, used to display plain text and escape special characters-->
    <!-- after thymeleaf After parsing, the original content will be replaced -->
    <div th:text="hello">world</div>
    <!-- th:utext    Text substitution without escaping special characters -->
    <div th:utext="hello" >world</div>



        th:text and th:utext Similarities and differences:
            1.Can evaluate variables or expressions
            2.Use“ + "Text connection possible
            When the parameter passed from the later segment is obtained with html When labeling th:text It will not be resolved th:utext Analyze 
    <div th:text="2>1"></div>
    <div th:utext="2>1"></div>
    <div th:text="'hello ' + 'world'"></div>
    <div th:utext="'hello ' + 'world'"></div>
    <div th:text="${msg}"></div>
    <div th:utext="${msg}"></div>



<!-- th:id replace id attribute -->
    <div id="id1" th:id="thymeleaf-id"></div>

Console results




<!-- th:value replace value attribute -->
    <input type="text" value="input" th:value="thymeleaf_value"/>




 th:object :


        th:object  Select the object in the parent label and use it in the word label *{}Select expression pick value
        If no object is selected for the parent label, the word label is used*{}Select an expression or ${}The effect of variable expression is the same,
        At the same time, the parent label selects the object, and the word label is still available ${}Variable expression value
     <div th:object="${user}">
         First:<span th:text="*{username}"></span>
         Second:<span th:text="*{user.username}"></span>
     <div th:object="${user}">
         Third:<span th:text="${user.username}"></span>





th:with :



1 <!-- th:with Local variable assignment operation -->
2      <span th:with="a = 'hello world'" th:text="${a}"></span>






1 <!-- th:style Set style -->
2      <span th:style=" 'color:red;font-size:16px;' ">Set style</span>



The processed html adds inline styles:




1 <!-- th:onclick Click event -->
2      <input type="button" value="Submit" th:onclick=" 'submit()' " />


Processed html:



See: thymeleaf th:each use base you blog Park (



th:switch :


 1 <!-- 
 2          th:if     Whether to display this label according to the condition
 3          th:unless And th:if On the contrary, the judgment condition is displayed when the condition is not met
 4          th:switch And Java Switch Sentence similar, collocation th:case use,
 5                      Display different contents according to different conditions
 6       -->
 7      <div th:if="'a' == 'b'"> a == b</div>
 8      <div th:if=" 'a' eq 'a'">a eq a</div>
 9      <div th:unless=" 1==2 ">th:unless  1==2 </div>
10      <div th:with="a = '3'" th:switch="${a}" >
11          <span th:case="1">case = 1</span>
12          <span th:case="3">case =3</span>
13          <span th:case="2">case =2</span>
14      </div>








 1  <!-- 
 2          th:selected   select Check the box to use
 3          th:src        replace src attribute
 4          th:inline     Inline attribute;
 5                         The attribute has text,none,javascript Three values,
 6                         stay <script> When used in labels, js You can get the object of the background delivery page in the code.
 8         Inline method: usually we use thymeleaf attribute th... + ${} Get the attribute value. If we need to get the variable in the tag, we need to use the inline style
 9             use [[${Attribute name}]] or [(${Attribute name})]Variable values can be obtained in the tag
10             There is one name = 'world', Use inline <span>hello , [[${name}]]</span>
11                 The result is: hello , world
12             but js The code may js To parse the array, you need to th:inline Set to none,Make it wrong js Code analysis
13       -->
14       <select th:with="a = 3">
15           <option th:selected="${a==1}">- 1 -</option>
16           <option th:selected="${a==2}">- 2 -</option>
17           <option th:selected="${a==3}">- 3 -</option>
18       </select>
19       <img src="" th:src="@{/wode}"/>
20       <script th:with="a='zhangsan' " type="text/javascript" th:inline="javascript">
21           var name = [[${a}]];
22       </script>

Parsed html code:



th:inline see:


th:fragment template layout, similar to JSP tag, is used to define a referenced or included template fragment

  • < footer th: fragment = "footer" > inserted content < / footer >


th:insert - layout label;
Inserts the template fragment (including the label) specified with the th:fragment attribute into the current label.

  • <div th:insert="commons/bar::footer"></div>

th:replace; layout label;
Replace the current entire label with the template fragment (including the label) specified by the th:fragment attribute.

  • <div th:replace="commons/bar::footer"></div>

th:action: replace the form submission address

  • <form th:action="@{/user/login}" th:method="post"></form>

Thymeleaf public page extraction, please see: Thymeleaf public code segment extraction, th:include, th:replace, th:insert - base - blog Park (