thymeleaf中th:attr用法

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