Reference: Thymeleaf tutorial
thymeleaf uses:
Introduce
<html xmlns:th="http://www.thymeleaf.org">
thymeleaf standard expression:
thymeleaf supports multiple expressions:
- Variable expression: ${...}
- Select variable expression: * {...}
- Connection expression: @ {...}
- Internationalization expression: #{...}
- Fragment reference expression: ~ {...}
- 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>
result:
<!-- th:text and th:utext Similarities and differences: Same: 1.Can evaluate variables or expressions 2.Use“ + "Text connection possible Different: 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> <div><span>helloworld</span></div>
th:id:
<!-- th:id replace id attribute --> <div id="id1" th:id="thymeleaf-id"></div>
Console results
th:value:
<!-- th:value replace value attribute --> <input type="text" value="input" th:value="thymeleaf_value"/>
Results
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> </div> <div> Second:<span th:text="*{user.username}"></span> </div> <div th:object="${user}"> Third:<span th:text="${user.username}"></span> </div>
result:
th:with :
1 <!-- th:with Local variable assignment operation --> 2 <span th:with="a = 'hello world'" th:text="${a}"></span>
Results:
th:style:
1 <!-- th:style Set style --> 2 <span th:style=" 'color:red;font-size:16px;' ">Set style</span>
result:
The processed html adds inline styles:
th:onclick:
1 <!-- th:onclick Click event --> 2 <input type="button" value="Submit" th:onclick=" 'submit()' " />
Processed html:
th:each:
See: thymeleaf th:each use base you blog Park (cnblogs.com)
th:if
th:unless
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>
result:
th:selected
th:src
th:inline:
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. 7 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="http://www.baidu.com" 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: https://blog.csdn.net/fanpeizhong/article/details/80173452
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 (cnblogs.com)