前言

• 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-*的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。