前言

spring boot 2.1.1.RELEASE
thymeleaf 3.0.11.RELEASE
thymeleaf 支持 HTML5 data-* 属性，比如： data-{prefix}-{name} 。
HTML5 data-* 属性

thymeleaf 支持 HTML5 data-* 属性

thymeleaf 支持使用 HTML5 data-* （data-th-开头）属性获取数据。

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

上面的写法与下面的写法是等效的：

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

HTML5 data-* 属性

设置 data-* 属性的值，需要使用 th:attr 。
thymeleaf 代码如下：

<div th:attr="data-id=${user.id}" > ... </div>

运行效果：

<div data-id="1003" > ... </div>

多个 HTML5 data-* 属性

逗号分割。比如：

<div th:attr="data-id=${user.id},data-name=${user.name},data-login=${user.login}" >...
</div>

js 获取 data-* 值

https://blog.csdn.net/sayyy/article/details/108776036

参考

https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html#support-for-html5-friendly-attribute-and-element-names

【thymeleaf】data-*相关推荐

【spring boot】【thymeleaf】SPEL调用静态方法和静态属性
前言 spring boot 2.1.1.RELEASE thymeleaf 3.0 静态属性 <sapn th:text="${T(java.lang.Math).PI}" ...
后端程序员如何写出优雅的前端试图【Thymeleaf】
Thymeleaf Thymeleaf 是一个现代服务器端 Java 模板引擎,适用于 Web 和独立环境. [官网地址]:https://www.thymeleaf.org/ 文章目录 Thymel ...
【C】Data type
系列连载 [python / C / C++] 参考 <C语言程序设计(第四版)谭浩强> [C语言]C语言视频教程 <郝斌 C 语言自学教程> 文章目录 C 语言概述 A.1 ...
【thymeleaf】【SpringBoot】在HTML中调用Spring Bean
前言 spring boot : 2.0.0.RELEASE maven eclipse thymeleaf 3.0 某些情况下需要在HTML中调用Service.比如:做CMS系统时提供的随时获取文 ...
【转】data和attr的用法与区别
attr()的用法 attr()获得属性值通过attr()获得属性时,可以这样$(selector).attr(attrName).注意,其返回值始终是string型! eg : 通过attr() ...
【thymeleaf】【SpringBoot】Thymeleaf 获取.properties中的配置项变量
前言略. Thymeleaf 获取.properties中的配置项变量假设我在 Thymeleaf 中写JavaScript的时候,发现我需要读取application.properties中的配 ...
【thymeleaf 】在 thymeleaf 中使用 shiro 标签
前言 sprint boot 2.3.4.RELEASE 说明 shiro 未提供对 thymeleaf 的支持.第三方项目 thymeleaf-extras-shiro 提供了在 thymeleaf ...
【spring boot】【thymeleaf】SPEL处理 null 值
前言 spring boot 2.1.1.RELEASE thymeleaf 3.0 变量为 null 时,显示默认值 name?:'Unknown' 当 name 变量为 null 时,显示值 Un ...
【Spring Boot】【Thymeleaf】The SpringStandard Dialect
前言 spring boot 2.1.1.RELEASE Thymeleaf 3.0 The SpringStandard Dialect 使用 Spring Expression Language ...

【thymeleaf】data-*

前言

thymeleaf 支持 HTML5 data-* 属性

HTML5 data-* 属性

多个 HTML5 data-* 属性

js 获取 data-* 值

参考

【thymeleaf】data-*相关推荐

最新文章

热门文章