前言

• 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-開(kāi)頭）屬性獲取數(shù)據(jù)。

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

上面的寫(xiě)法與下面的寫(xiě)法是等效的：

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

HTML5 data-* 屬性

設(shè)置 data-* 屬性的值，需要使用 th:attr 。
thymeleaf 代碼如下：

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

運(yùn)行效果：

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

多個(gè) HTML5 data-* 屬性

逗號(hào)分割。比如：

<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

總結(jié)

以上是生活随笔為你收集整理的【thymeleaf】data-*的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。