初识Thymeleaf：简单表达式和标签一、th简单表达式：二、th常用标签：

68 阅读 0 评论 45 点赞

我是靠谱客的博主谨慎枕头，最近开发中收集的这篇文章主要介绍初识Thymeleaf：简单表达式和标签一、th简单表达式：二、th常用标签：，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

初识Thymeleaf：简单表达式和标签

一、th简单表达式：
二、th常用标签：

一、th简单表达式：

① ${…} 变量表达式：

<input type="text" name="userName" value="Beyrl" th:value="${user.name}" />

上述代码为引用user对象的name属性值。

② *{…} 选择表达式:

<div th:object="${session.user}">
     <p>Nationality: <span th:text="*{nationality}">XXXX</span>.</p>
</div>

选择表达式一般跟在th:object后，直接选择object中的属性。

③ #{…} 消息文字表达式：

<p th:utext="#{home.welcome}">Welcome to our grocery store!</p>

④ @{…} 链接url表达式：

<a href="details.html" th:href="@{/webPage/details(orderId=${o.id})}">view</a>

@{……}支持决定路径和相对路径。其中相对路径又支持跨上下文调用url和协议的引用（//code.jquery.com/jquery-2.0.3.min.js）。
　　　当URL为后台传出的参数时，代码如下：

<img src="../../webPage/food/images/pizza.jpg" th:src="@{${path}}" alt="披萨" />

在这里插入图片描述

二、th常用标签：

1.th????
　　　　类似html标签中的id属性。

<div class="student" th:id = "food+(${pizza.index}+1)"></div>

2.th:text:与th:utext:
　　　　即文本显示，可对表达式或变量求值，并将结果显示在其被包含的HTML标签内，替换原有HTML文本。这里需要与th:utext:区分开，th:text:例子如下：

//若  restraunt.welcome=welcome to our <b>delicious</b>restaurant!
<p h:text="#{restaurantt.welcome}"></p>
//解析的结果为： welcome to our <b>delicious</b>restaurant!
<p h:utext="#{restaurant.welcome}"></p> 
//转义最终输出的结果为：welcome to our delicious restaurant!

3.th:object：
　用于表单数据对象绑定，将表单绑定到后台controller的一个JavaBean参数,常与th:field一起使用进行表单数据绑定。选择表达式一般跟在th:object后，直接取object中的属性。

这里有一个需要注意的点：{…}表达式的值是在选定的对象而不是整个context的map。也就是说，如果没有选定的对象，{…}和${…}没有区别，请看下面的例子：

<div th:object="${session.user}">
    <p>姓名：<span th:text="*{Name}">noodles</span></p>
    <p>年龄：<span th:text="*{age}">24</span></p>
    <p>国籍：<span th:text="*{nationlity}">中国</span></p>
</div>
//等同于
<div>
    <p>姓名：<span th:text="${session.user.Name}">noodles</span></p> 
　  <p>年龄：<span th:text="${session.user.age}">24</span></p>
    <p>国籍：<span th:text="${session.user.nationlity}">中国</span></p>
</div>

4.th:field：上面提到了一个新标签，th:field：，常用于表单字段绑定。通常与th:object一起使用。属性绑定、集合绑定。

<form th:action="@{/bb}" th:object="${user}" method="post" th:method="post">
    <input type="text" th:field="*{name}"/>
    <input type="text" th:field="*{msg}"/>
    <input type="submit"/>
</form>

5.th:action:定义后台控制器路径，类似标签的action属性。

<form action="subscribe.html" th:action="@{/subscribe}">

6.th：href:定义超链接，类似a标签的href 属性。value形式为@{/logout}.

<!-- 输出： 'http://localhost:8080/gtvg/order/details?orderId=3' -->
<a href="details.html" 
   th:href="@{http://localhost:8080/gtvg/order/details(orderId=${o.id})}">view</a>
<!-- 输出： '/gtvg/order/details?orderId=3' -->
<a href="details.html" th:href="@{/order/details(orderId=${o.id})}">view</a>
<!-- 输出： '/gtvg/order/3/details' -->
<a href="details.html" th:href="@{/order/{orderId}/details(orderId=${o.id})}">view</a>

7.th：src:用于外部资源引入，类似于

<script th:src="@{/js/jquery/jquery-2.4.min.js}">

8.th:value:用于标签赋值，类似标签的value属性。

<option th:value="soup">soup</option>
<input  id="msg" th:value="${msg}" />

9.th:if or th:unless：条件判断,支持布尔值，数字（非零为true)，字符，字符串等.

<div th:if="${restaurant.index} == 0">... I love eating(do something at here) ...</div>
<span th:if="${food.price lt 100}" class="offer">Special desert!</span>    
/*不能用"<"，">"等符号，要用"lt"等替代*/
<select class='form-control' name="skill[4].proficiency">
     <option >掌握程度</option>
     <option th:if="${skill.level eq '一般'}" th:selected="selected">一般</option>
     <option th:if="${skill.level eq '熟练'}" th:selected="selected">熟练</option>
     <option th:if="${skill.level eq '精通'}" th:selected="selected">精通</option>
</select>