thymeleaf简单使用 th:text, th:each, th:id ,th:switch, th:inline

thymeleaf使用：

　　引入

<html xmlns:th="http://www.thymeleaf.org">

thymeleaf标准表达式：

　　thymeleaf支持多种表达式：

变量表达式： ${...}
选择变量表达式： *{...}
连接表达式： @{...}
国际化表达式： #{...}
片段引用表达式： ~{...}

　　变量表达式

　　　　使用${...}包裹的表达式被称为变量表达式，该表达式具有以下功能：

获取对象的属性和方法
使用内置的基本对象
使用内置的工具对象

使用变量表达式还可以使用内置基本对象，获取内置对象的属性，调用内置对象的方法。 Thymeleaf 中常用的内置基本对象如下：

#ctx ：上下文对象；
#vars ：上下文变量；
#locale：上下文的语言环境；
#request：HttpServletRequest 对象（仅在 Web 应用中可用）；
#response：HttpServletResponse 对象（仅在 Web 应用中可用）；
#session：HttpSession 对象（仅在 Web 应用中可用）；
#servletContext：ServletContext 对象（仅在 Web 应用中可用）。

除了能使用内置的基本对象外，变量表达式还可以使用一些内置的工具对象。

strings：字符串工具对象，常用方法有：equals、equalsIgnoreCase、length、trim、toUpperCase、toLowerCase、indexOf、substring、replace、startsWith、endsWith，contains 和 containsIgnoreCase 等；
numbers：数字工具对象，常用的方法有：formatDecimal 等；
bools：布尔工具对象，常用的方法有：isTrue 和 isFalse 等；
arrays：数组工具对象，常用的方法有：toArray、length、isEmpty、contains 和 containsAll 等；
lists/sets：List/Set 集合工具对象，常用的方法有：toList、size、isEmpty、contains、containsAll 和 sort 等；
maps：Map 集合工具对象，常用的方法有：size、isEmpty、containsKey 和 containsValue 等；
dates：日期工具对象，常用的方法有：format、year、month、hour 和 createNow 等。

thymeleaf属性使用：

th:text 和 th:utext使用：

<!-- th:text 为Thymeleaf属性，用于展示纯文本，会对特殊字符进行转义-->
    <!-- 经过thymeleaf解析后，会将原来的内容进行替换 -->
    <div th:text="hello">world</div>
    
    <!-- th:utext    文本替换，不转义特殊字符 -->
    <div th:utext="hello" >world</div>

结果：

<!-- 
        th:text和th:utext的异同：
        相同：
            1.都可以对变量或表达式进行求值
            2.用“ + ”可进行文本连接
        不同：
            当获取从后段传来的参数带有html标签时 th:text不会进行解析 th:utext进行解析 
    -->
    <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>&lt;span&gt;helloworld&lt;/span&gt;</div>

th:id：

<!-- th:id 替换id属性 -->
    <div id="id1" th:id="thymeleaf-id"></div>

控制台结果

th:value:

<!-- th:value 替换value属性 -->
    <input type="text" value="input" th:value="thymeleaf_value"/>

结果

th:object :

<!-- 
        th:object  在父标签选择对象，在字标签中使用 *{}选择表达式选取值
        若父标签没有选择对象，字标签使用*{}选择表达式或${}变量表达式效果是一样的，
        同时父标签选择了对象，字标签仍可用${}变量表达式取值
     -->
     <div th:object="${user}">
         第一：<span th:text="*{username}"></span>
     </div>
     <div>
         第二：<span th:text="*{user.username}"></span>
     </div>
     <div th:object="${user}">
         第三：<span th:text="${user.username}"></span>
     </div>

结果：

th:with :

1 <!-- th:with局部变量赋值运算 -->
2      <span th:with="a = 'hello world'" th:text="${a}"></span>

结果：

th:style:

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

结果：

经处理后的html加入了行内样式：

th:onclick:

1 <!-- th:onclick点击事件 -->
2      <input type="button" value="提交" th:onclick=" 'submit()' " />

经处理后的html:

th:each:

请看：thymeleaf th:each使用 - 基地您 - 博客园 (cnblogs.com)

th:if

th:unless

th:switch :

 1 <!-- 
 2          th:if     根据条件判断是否要展示此标签
 3          th:unless 与th:if判断条件相反，当条件不满足时显示
 4          th:switch 与Java Switch语句类似，搭配th:case使用，
 5                      根据不同条件展示不同内容
 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>

结果：

th:selected

th:src

th:inline:

 1  <!-- 
 2          th:selected   select 选择框选中使用
 3          th:src        替换src属性
 4          th:inline     内联属性；
 5                         该属性有 text，none,javascript 三种取值，
 6                         在 <script> 标签中使用时，js 代码中可以获取到后台传递页面的对象。
 7                         
 8         内联方法： 通常我们使用thymeleaf属性th... + ${} 获取属性值，如果我们需要在标签内获取变量就需要使用内联样式
 9             使用 [[${属性名}]] 或 [(${属性名})]可在标签内获取变量值
10             如： 有一个name = 'world', 使用内联 <span>hello , [[${name}]]</span>
11                 结果为： hello , world
12             但js代码中可能会将js的数组进行解析，此时需要将th:inline设置为none,使其不对js代码进行解析
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>

经过解析后的html代码：

th:inline 详情请看： https://blog.csdn.net/fanpeizhong/article/details/80173452

th:fragment 模板布局，类似 JSP 的 tag，用来定义一段被引用或包含的模板片段

<footer th:fragment="footer">插入的内容</footer>

th:insert 布局标签；
　　　　　　将使用 th:fragment 属性指定的模板片段（包含标签）插入到当前标签中。

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

th:replace 布局标签；
　　　　　　使用 th:fragment 属性指定的模板片段（包含标签）替换当前整个标签。

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

th:action 替换表单提交地址

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

Thymeleaf公共页面抽取请看： Thymeleaf公共代码段抽取，th:include, th:replace, th:insert - 基地您 - 博客园 (cnblogs.com)

posted @ 2022-03-08 17:13 基地您阅读(8345) 评论(0) 编辑收藏举报

刷新页面返回顶部

基地您

thymeleaf简单使用 th:text, th:each, th:id ,th:switch, th:inline

公告