Thymeleaf学习笔记

最新推荐文章于 2023-05-04 22:36:36 发布

原创最新推荐文章于 2023-05-04 22:36:36 发布 · 282 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#Thymeleaf学习笔记 #Thymeleaf常用标签

thymeleaf 专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍了Thymeleaf模板引擎的各种表达式用法，包括消息表达式、选择表达式、链接表达式等，并提供了丰富的示例代码。同时解答了一些关于Thymeleaf的常见问题。

未完成，不定时更新

1.Thymeleaf的方言

<span th:text="....">

<span data-th-text="....">

举例说明

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Thymeleaf Demo</title>
</head>
<body>
	<p th:text="#{home.welcome}">hello world:thymeleaf</p>
</body>
</html>

表达式

消息表达式: #{...}

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Thymeleaf Demo</title>
</head>
<body>
	<table>
		 <tr>
			<th th:text="#{header.address.city}">xi'an</th>
			<th th:text="#{header.address.country}">china</th>
		 </tr>
	</table>
</body>
</html>

选择表达式：*{ .... }

 <div th:object="${book}">
    <span th:text="*{title}"></span>
 </div>

该表达式的含义是选择 book变量的title属性

与变量表达式的区别：它们是在当前选择的对象(book)基础之上再进行选择title属性(book.title)，而不是整个上下文变量映射执行

链接表达式：@{ .... }

<a th:href="@{http://www.baidu.com}">百度</a>

分段表达式 : th:insert 或th:replace

 <div th:fragment ="base">
        &copy;2018<a href="www.baidu.com">百度</a>
    </div>
    <div th:insert="~{footer :: base}"></div>

字面量

    <p>
        文本,单引号 <span  th:text="'hello world '"></span>
        数字<span  th:text="21*12">-1</span>
    </p>
    <div th:if="${user.isAdmin()} == false"></div>
    <div th:if="${user.create()} == null"></div>

设置属性值: th:attr

 <form action="subscribe.html" th:attr="action=@{/subscribe}">
    <fieldset>
        <input type="text" name="email"  />        
        <input type="submit" value = "Subscribe" th:attr="value=#{subscribe.submit}"/>     
   </fieldset>
</form>

迭代器: th：each

<ul>
        <li th:each="book :${bools}" th:text="${book.title}"> </li>
    </ul>
    <!-- 状态变量  index,count,size,current,even/odd,first,last-->
    <table>
        <tr>
            <th>NAME</th>
            <th>PRICE</th>
            <th>IN STOCK</th>
            <th>test</th>
        </tr>    
        <tr th:each="prod,iterStat :${prods}" th:class="${iterStat.odd}? 'odd'">
            <td th:text="${prod.name}">Onions</td>
            <td th:text="${prod.price}">2.41</td>
            <td th:text="${prod.inStock} ? #{true} : #{false}">yes</td>
            <td th:text="${iterStat.odd} ? #{true} : #{false}">yes</td>
        </tr>
    </table>
    <ol>
         <li>Map循环：  
            <div th:each="mapS:${map}">  
            <div th:text="${mapS}"></div>  
            </div>  
        </li>  
        <li>数组循环：  
            <div th:each="arrayS:${arrays}">  
            <div th:text="${arrayS}"></div>  
            </div>  
        </li>  
    </ol>

条件语句: th:if ,th:unless

<a href="comments.html"
	   th:href="@{/product/comments({prodId=${prod.id}})}"
	   th:if="${not #lists.isEmpty(prod.comments)}">view</a>

2.常见问题

1. ${} 、#{} 、 *{} 的比较

${ }

变量表达式（美元表达式），用于访问容器上下文环境中的变量，功能同jstl中${}

#{ }

消息表达式（井号表达式，资源表达式）。通常与th:text属性一起使用，指明声明了th:text的标签的文本是#{}中的key 所对应的value，而标签内的文本将不会显示。

* { }

选择表达式（星号表达式）。选择表达式与变量表达式有一个重要的区别：选择表达式计算的是选定的对象，而不是整个环境变量映射

参考文章

http://www.cnblogs.com/hjwublog/p/5051632.html