Thymeleaf基本语法(三)

1、设置属性值

1.1、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>

设置多个属性时,需要使用逗号进行分隔

<img src="../../images/gtvglogo.png" 
     th:attr="src=@{/images/gtvglogo.png},title=#{logo},alt=#{logo}" />

1.2、为特定属性赋值

到现在为止,你可能会使用下面方式为value属性进行赋值:

<input type="submit" value="Subscribe!" th:attr="value=#{subscribe.submit}"/>

然而使用这种方式是一个相当丑陋的标记。在属性值中指定赋值可能非常实用,但如果您必须一直这样做,这并不是创建模板的最优雅方式。

Thymeleaf 不推荐使用,这就是为什么th:attr很少在模板中使用。通常,您将使用其他th:*属性,其任务是设置特定标签属性(而不仅仅是任何属性,如th:attr)。

例如,要设置value属性,请使用th:value

<input type="submit" value="Subscribe!" th:value="#{subscribe.submit}"/>

 有很多这样的属性,每个属性都针对特定的 HTML5 属性:(包含了所有属性)

1.3、一次设置多个值 

有两个相当特殊的属性被称为th:alt-titleth:lang-xmllang可用于同时将两个属性设置为相同的值。具体来说:

  • th:alt-title将设置alttitle
  • th:lang-xmllang将设置langxml:lang
<img src="../../images/gtvglogo.png" 
     th:src="@{/images/gtvglogo.png}" th:title="#{logo}" th:alt="#{logo}" />

 这个可以使用标签进行替换

<img src="../../images/gtvglogo.png" 
     th:src="@{/images/gtvglogo.png}" th:alt-title="#{logo}" />

1.4、追加和前置

Thymeleaf 还提供th:attrappendth:attrprepend属性,它们将评估结果附加(后缀)或前置(前缀)到现有属性值。

例如,您可能希望将要添加(未设置,只是添加)到上下文变量中的一个按钮的 CSS 类的名称存储,因为要使用的特定 CSS 类将取决于用户所做的事情前:

<input type="button" value="Do it!" class="btn" th:attrappend="class=${' ' + cssStyle}" />

 标准方言中还有两个特定的附加属性th:classappendth:styleappend属性,用于向元素添加 CSS 类或样式片段,而不覆盖现有的:

<tr th:each="prod : ${prods}" class="row" th:classappend="${prodStat.odd}? 'odd'">

 1.5、固定值布尔属性

HTML 具有布尔属性的概念,即没有值的属性,并且存在一个,意味着值是“真”。在 XHTML 中,这些属性只取 1 个值,即它本身。

例如checked

<input type="checkbox" name="option2" checked /> <!-- HTML -->
<input type="checkbox" name="option1" checked="checked" /> <!-- XHTML -->

 标准方言包括允许您通过评估条件来设置这些属性的属性,因此如果评估为 true,则该属性将设置为其固定值,如果评估为 false,则不会设置该属性:

<input type="checkbox" name="active" th:checked="${user.active}" />

标准方言中存在以下固定值布尔属性:

th:asyncth:autofocusth:autoplay
th:checkedth:controlsth:declare
th:defaultth:deferth:disabled
th:formnovalidateth:hiddenth:ismap
th:loopth:multipleth:novalidate
th:nowrapth:openth:pubdate
th:readonlyth:requiredth:reversed
th:scopedth:seamlessth:selected

 1.6、设置任意属性的值

Thymeleaf 提供了一个默认的属性处理器,它允许我们设置任何属性的值,即使th:*在标准方言中没有为它定义特定的处理器。

所以像:

<span th:whatever="${user.name}">...</span>

 将导致:

<span whatever="John Apricot">...</span>

1.7、支持 HTML5 友好的属性和元素名称

也可以使用完全不同的语法以对 HTML5 更友好的方式将处理器应用于您的模板。 

<table>
    <tr data-th-each="user : ${users}">
        <td data-th-text="${user.login}">...</td>
        <td data-th-text="${user.name}">...</td>
    </tr>
</table>

data-{prefix}-{name}语法是在 HTML5 中编写自定义属性的标准方式,无需开发人员使用任何命名空间名称,例如th:*. Thymeleaf 使这种语法自动适用于所有方言(不仅是标准方言)。

还有一种语法来指定自定义标签:{prefix}-{name},它遵循W3C 自定义元素规范(更大的W3C Web 组件规范的一部分)。例如,这可以用于th:block元素(或也th-block),这将在后面的部分中解释。

重要提示:此语法是对命名空间语法的补充th:*,它不会取代它。将来根本不打算弃用命名空间语法。

 

2、迭代 

2.1、th:each 

<tr th:each="prod : ${prods}">
        <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>

你在上面看到的那个prod : ${prods}属性值意味着“对于评估结果中的每个元素${prods},重复这个模板片段,使用名为 prod 的变量中的当前元素”。让我们为我们看到的每一个事物命名:

  • ${prods}我们将调用迭代表达式迭代变量
  • 我们将调用迭代变量或简称prod迭代变量

请注意,proditer 变量的作用域是<tr>元素,这意味着它可用于内部标签,如<td>

可迭代值

该类java.util.List并不是 Thymeleaf 中唯一可用于迭代的值。有一组非常完整的对象被属性认为是可迭代的:th:each

  • 任何实现的对象java.util.Iterable
  • 任何实现java.util.Enumeration.
  • 任何实现 的对象java.util.Iterator,其值将在迭代器返回时使用,而无需将所有值缓存在内存中。
  • 任何实现java.util.Map. 迭代映射时,迭代变量将属于 class java.util.Map.Entry
  • 任何数组。
  • 任何其他对象都将被视为包含对象本身的单值列表。

2.2、保持迭代状态

使用 时th:each,Thymeleaf 提供了一种用于跟踪迭代状态的机制:状态变量

状态变量在th:each属性中定义并包含以下数据:

  • 当前迭代索引,从 0 开始。这是index属性。
  • 当前迭代索引,从 1 开始。这是count属性。
  • 迭代变量中的元素总数。这是size属性。
  • 每次迭代的iter 变量。这是current属性。
  • 当前迭代是偶数还是奇数。这些是even/odd布尔属性。
  • 当前迭代是否是第一个。这是first布尔属性。
  • 当前迭代是否是最后一个。这是last布尔属性。
<table>
  <tr>
    <th>NAME</th>
    <th>PRICE</th>
    <th>IN STOCK</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>
  </tr>
</table>

状态变量(iterStat在此示例中)th:each通过在 iter 变量本身之后写入其名称来在属性中定义,用逗号分隔。就像 iter 变量一样,status 变量的作用域也是由包含该th:each属性的标记定义的代码片段。

注意:如果您没有明确设置状态变量,Thymeleaf 将始终通过Stat为迭代变量的名称添加后缀来为您创建一个。

<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>

3、条件评估

 3.1、简单条件语句:'if'和'unless'

有时,您需要模板的片段仅在满足特定条件时才出现在结果中。

例如,假设我们想在我们的产品表中显示一个列,其中包含每个产品存在的评论数量,如果有任何评论,则显示该产品的评论详细信息页面的链接。

为此,我们将使用以下th:if属性:

<table>
  <tr>
    <th>NAME</th>
    <th>PRICE</th>
    <th>IN STOCK</th>
    <th>COMMENTS</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>
    <td>
      <span th:text="${#lists.size(prod.comments)}">2</span> comment/s
      <a href="comments.html" 
         th:href="@{/product/comments(prodId=${prod.id})}" 
         th:if="${not #lists.isEmpty(prod.comments)}">view</a>
    </td>
  </tr>
</table>

 这里有很多东西要看,所以让我们关注重要的一行:

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

注意:th:if属性不仅会评估布尔条件,下面表达式会默认的布尔值为true:

  • 如果值不为空:
    • 如果 value 是一个布尔值并且是true.
    • 如果 value 是一个数字并且非零
    • 如果 value 是一个字符并且非零
    • 如果 value 是 字符串 并且不是“false”、“off”或“no”
    • 如果 value 不是布尔值、数字、字符或字符串。
  • (如果 value 为 null,th:if 将评估为 false)。

th:if有一个与之相反的逆属性th:unless,这个属性等同于if判断的结果加上not,如上面的if表达式

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

3.2、切换语句

 thymeleaf中支持switch语句类似于Java中的switch语句,这个属性为:th:switch / th:case 

<div th:switch="${user.role}">
  <p th:case="'admin'">User is an administrator</p>
  <p th:case="#{roles.manager}">User is a manager</p>
</div>

 注意:一旦th:case被评估为true,其它th:case在这个switch上下文中被评估为false

默认选项指定为th:case="*"

<div th:switch="${user.role}">
  <p th:case="'admin'">User is an administrator</p>
  <p th:case="#{roles.manager}">User is a manager</p>
  <p th:case="*">User is some other thing</p>
</div>

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
Thymeleaf是一个流行的服务器端Java模板引擎,它提供了一套丰富的语法和标签,让开发者可以更加方便地处理HTML模板。以下是Thymeleaf的语法大全: 1. 基本语法 Thymeleaf基本语法是使用${}表示表达式,例如: ``` <p th:text="${user.name}">John Doe</p> ``` 上面的代码会将user对象中的name属性的值显示在页面上。 2. 属性设置 Thymeleaf可以在HTML标签中添加属性,例如: ``` <img src="image.png" th:src="@{${user.avatarUrl}}" /> ``` 上面的代码中,使用@{}包裹表达式,将${user.avatarUrl}的值设置为img标签的src属性。 3. 条件判断 Thymeleaf支持if/else条件判断语句,例如: ``` <p th:if="${user.isAdmin}">Welcome Admin</p> ``` 上面的代码中,如果user.isAdmin为true,则显示“Welcome Admin”。 4. 列表循环 Thymeleaf可以通过th:each指令实现列表循环,例如: ``` <ul> <li th:each="item : ${items}" th:text="${item}"></li> </ul> ``` 上面的代码中,将items列表中的每个元素显示在li标签中。 5. 模板继承 Thymeleaf支持模板继承,可以在父模板中定义公共部分,例如: 父模板: ``` <html> <head th:fragment="head"> <title>My Website</title> <link href="style.css" rel="stylesheet" /> </head> <body> <header th:fragment="header"> <h1>My Website</h1> </header> <div th:fragment="content"></div> <footer th:fragment="footer"></footer> </body> </html> ``` 子模板: ``` <!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org" th:include="layout/layout :: head"> <body> <div th:include="layout/layout :: header"></div> <div th:replace="content"></div> <div th:include="layout/layout :: footer"></div> </body> </html> ``` 上面的代码中,子模板使用th:include指令引入父模板的公共部分,使用th:replace指令替换content内容。 6. URL处理 Thymeleaf可以处理URL,例如: ``` <a th:href="@{http://www.example.com}">Example Website</a> ``` 上面的代码中,将链接指向http://www.example.com。 以上是Thymeleaf的语法大全,希望能帮助到你!

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

悠然予夏

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值