使用thymeleafa時候如果要hidden某些資料或者要在js裡面動態獲取某些資料，我們可以使用th:attr 將資料作為html標籤的一個屬性存起來

例如：

1 <div id="cityBtn" class="btn" th:attr="data-cityId=${cityId}" th:text="${cityName}">上海
2    <span class="fa fa-angle-down"></span>
3 </div>

其中的 cityId是我們要儲存起來的資料，然後就可以在js裡面使用了。

使用方式為：

1  var cityId = $("#cityBtn").data("cityid");

如果是有多個屬性要hidden，只需要用逗號隔開就可以了：

<div id="cityBtn" class="btn" th:attr="data-cityId=${cityId}, data-regionId=${regionId}" th:text="${cityName}"" >上海
<span class="fa fa-angle-down"></span>
</div>
 

關於th:attr使用報錯，不支援裡面存在 '' 的問題。還有屬性值獲取拼接的問題。

剛好現在有點時間，順便寫一下我自己對th:attr的理解吧。

首先，th:attr可以設定多個屬性值，可以將屬性值寫死，當然也可以獲取。

其次，裡面配合‘|‘使用可以實現屬性值拼接等問題。

廢話不多說了，還是來幾個示例吧！

1、寫死的單個屬性值新增
th:attr="class=btn"
2、寫死的多個屬性值新增
th:attr="class=btn,title=link"
3、當一個屬性的值較多的時候可以用 |
th:attr="class=|btn btn-group|"
4、屬性值動態賦值
th:attr="value=#{obj.value},title=#{obj.title}"
5、動態拼接屬性值
th:attr="value=select_val|#{obj.val}|"
6、屬性值中有引號的情況
th:attr="data-am-collapse=|{target:'#collapse-nav5'}|

————————————————

源自部落格連結：https://www.cnblogs.com/mailyuan/p/11403915.html
源自連結：https://blog.csdn.net/it_java_shuai/article/details/78834451