thymeleaf模板使用

最新推荐文章于 2023-11-13 09:18:31 发布

好雨知时节哎

最新推荐文章于 2023-11-13 09:18:31 发布

阅读量270

点赞数

分类专栏：模板引擎文章标签： thymeleaf

本文链接：https://blog.csdn.net/qq_36374082/article/details/91358513

版权

模板引擎专栏收录该内容

2 篇文章 0 订阅

订阅专栏

thymeleaf

遍历

<table>
  <tr>
    <th>NAME</th>
    <th>PRICE</th>
    <th>IN STOCK</th>
  </tr>
  <tr th:each="prod : ${prods}" th:class="${prodStat.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>
  </tr>
</table>

我们希望该th:each属性在之前执行，th:text以便我们得到我们想要的结果，但考虑到HTML / XML标准没有给标记中的属性编写顺序赋予任何意义，优先级必须在属性本身中建立机制，以确保它将按预期工作。

因此，所有Thymeleaf属性都定义了一个数字优先级，它确定了它们在标记中执行的顺序。这个顺序是：

、常用的标签

11.4。合成th:block标签

标准方言中包含的Thymeleaf唯一的元素处理器（不是属性）是th:block。

th:block是一个纯粹的属性容器，允许模板开发人员指定他们想要的任何属性。Thymeleaf将执行这些属性，然后简单地使块，但不是它的内容，消失。

因此，在创建每个元素需要多个迭代表时，它可能很有用：

<table>
  <th:block th:each="user : ${users}">
    <tr>
        <td th:text="${user.login}">...</td>
        <td th:text="${user.name}">...</td>
    </tr>
    <tr>
        <td colspan="2" th:text="${user.address}">...</td>
    </tr>
  </th:block>
</table>

当与仅原型注释块结合使用时尤其有用：

<table>
    <!--/*/ <th:block th:each="user : ${users}"> /*/-->
    <tr>
        <td th:text="${user.login}">...</td>
        <td th:text="${user.name}">...</td>
    </tr>
    <tr>
        <td colspan="2" th:text="${user.address}">...</td>
    </tr>
    <!--/*/ </th:block> /*/-->
</table>

注意这个解决方案如何让模板成为有效的HTML（不需要在

里面添加禁止的块），并且在浏览器中作为原型静态打开时仍然可以正常工作！

12内联

虽然标准方言允许我们使用标记属性来完成几乎所有操作，但在某些情况下我们可能更喜欢将表达式直接编写到HTML文本中。例如，我们可能更喜欢这样写：

<p>Hello, [[${session.user.name}]]!</p>

而不是这个：

<p>Hello, <span th:text="${session.user.name}">Sebastian</span>!</p>

在Thymeleaf 之间表达[[…]]或被[(…)]认为是内联表达式，在其中我们可以使用任何类型的表达式，这些表达式在一个th:text或th:utext属性中也是有效的。

请注意，虽然[[…]]对应于th:text（即结果将被HTML转义），但[(…)]对应于th:utext并且不会执行任何HTML转义。所以对于一个变量，例如msg = ‘This is great!’，给定这个片段：

<p>The message is "[(${msg})]"</p>

禁用内联

<p th:inline="none">A double array looks like this: [[1, 2, 3], [4, 5]]!</p>

这将导致：

<p>A double array looks like this: [[1, 2, 3], [4, 5]]!</p>

12.2文字内联

文本内联与我们刚刚看到的表达内联功能非常相似，但它实际上增加了更多功能。必须明确启用它th:inline=“text”。

文本内联不仅允许我们使用我们刚刚看到的相同内联表达式，而且实际上处理标签主体就好像它们是在TEXT模板模式下处理的模板一样，这允许我们执行基于文本的模板逻辑（不仅仅是输出表达式）。

我们将在下一章中看到有关文本模板模式的更多信息。

12.3 JavaScript内联

JavaScript内联允许

与文本内联一样，这实际上相当于处理脚本内容，就好像它们是JAVASCRIPT模板模式中的模板一样，因此文本模板模式的所有功能（见下一章）都将在眼前。但是，在本节中，我们将重点介绍如何使用它将Thymeleaf表达式的输出添加到JavaScript块中。

必须使用th:inline="javascript"以下方式显式启用此模式：

<script th:inline="javascript">
    ...
    var username = [[${session.user.name}]];
    ...
</script>

这将导致：

<script th:inline="javascript">
    ...
    var username = "Sebastian \"Fruity\" Applejuice";
    ...
</script>

以上代码中需要注意的两件重要事项：

首先，JavaScript内联不仅会输出所需的文本，而且还会用引号和JavaScript来包含它 - 转义其内容，以便将表达式结果输出为格式良好的JavaScript文字。

其次，发生这种情况是因为我们将 ${session.user.name}表达式输出为转义，即使用双括号表达式：[[$ {session.user.name}]]。如果相反，我们使用非转义，如：

<script th:inline="javascript">
    ...
    var username = [(${session.user.name})];
    ...
</script>

结果如下：

<script th:inline="javascript">
    ...
    var username = Sebastian "Fruity" Applejuice;
    ...
</script>

这是一个格式错误的JavaScript代码。但是，如果我们通过附加内联表达式来构建脚本的一部分，那么输出未转义的内容可能就是我们所需要的，因此最好有这个工具
关键字
功能介绍
案例

th:id

替换id

<input th:id="'xxx' + ${collect.id}"/>


    th:text

文本替换

    <p th:text="${collect.description}">description</p>

th:utext

支持html的文本替换

content

    th:object

替换对象

    <div th:object="${session.user}">

th:value
属性赋值

<input th:value = "${user.name}" />

```

th:with

变量赋值运算

<div th:with="isEvens = ${prodStat.count}%2 == 0"></div>


th:style

设置样式

    <div th:style="'display:' + @{(${sitrue} ? 'none' : 'inline-block')} + ''"></div>
    
    ```
    th:onclick

点击事件

    <td th:onclick = "'getCollect()'"></td>

th:each

属性赋值

<tr th:each = "user,userStat:${users}">

th:if

判断条件

<a th:if = "${userId == collect.userId}">

    th:unless

和th:if判断相反

    <a th:href="@{/login} th:unless=${session.user != null}">Login</a>

th:href

链接地址

<a th:href="@{/login}" th:unless=${session.user != null}>Login</a>

    th:switch

多路选择配合th:case使用

    <div th:switch="${user.role}">

th:fragment
th:switch的一个分支
<p th:case = "'admin'">User is an administrator</p>

    th:includ

布局标签，替换内容到引入的文件

    <head th:include="layout :: htmlhead" th:with="title='xx'"></head>

th:replace

布局标签，替换整个标签到引入的文件

<div th:replace="fragments/header :: title"></div>

    th:selectd
    selected选择框选中
    th:selected="(${xxx.id} == ${configObj.dd})"

th:src

图片类地址引入

<img class="img-responsive" alt="App Logo" th:src="@{/img/logo.png}" />

    th:inline

定义js脚本可以使用变量

    <script type="text/javascript" th:inline="javascript">

th:action

表单提交的地址

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


th:remove
删除某个属性

1.all:删除包含标签和所有的孩子。2.body:不包含标记删除,但删除其所有的孩子。3.tag:包含标记的删除,但不删除它的孩子。4.all-but-first:删除所有包含标签的孩子,除了第一个。5.none:什么也不做。这个值是有用的动态评估。 ```

th:attr

设置标签属性，多个属性可以用逗号分隔
比如 th:attr=“src=@{/image/aa.jpg},title=#{logo}”，此标签不太优雅，一般用的比较少。

好雨知时节哎

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
thymeleaf模板使用

thymeleaf遍历<table> <tr> <th>NAME</th> <th>PRICE</th> <th>IN STOCK</th> </tr> <tr th:each="prod : ${prods}" th:class="${prod...
复制链接

扫一扫

专栏目录