前言

最近再跟着做谷粒商城项目，这是一个很老的项目了。尤其是前端是Thymeleaf写的，简直太脱轨了。
其实Thymeleaf写法和Jsp差不多，但是没有组件的使用确实很让人难受。不管了，弄完以后再进行react，vue3的学习

一、th:attr

使用thymeleafa时候，我们可以自定义一些属性。目的是将数据作为html标签的一个属性存起来
多说无益，来看实例

实例

	<div class="top-3 addr-item" th:each="addr:${orderConfirmData.address}">
<p th:attr="def=${addr.defaultStatus},addrId=${addr.id}">[[${addr.name}]]</p><span>[[${addr.name}]]
[[${addr.province}]]
[[${addr.detailAddress}]]
[[${addr.phone}]]</span>
</div>

明显，这里的p标签我给他加上了两个私有属性 （def 和 addrId ）

接下来利用js代码看他的用处

	function highlight() {
$(".addr-item p").css({"border":"2px solid gray"})
//底下这句话取到p标签里面 def属性 = ‘1’ 的一项，并为其加上特定的css样式
$(".addr-item p[def='1']").css({"border":"2px solid red"})
}
$(".addr-item p").click(function () {
// 给所有p标签的def属性都变为‘0’
$(".addr-item p").attr("def",0);
// 当前点击的def属性变为 ‘1’
$(this).attr("def",1);
highlight();
//获取当前的Id（利用addr.id定义自定义属性）
var addrId = $(this).attr("addrId");
//发送Ajax获取运费
getFate(addrId);
});

好了，可以看出attr多数情况下是为了保存一个数据在标签中，利用这个数据我们可以对标签进行操作！！

总结

作为后端，前端我们不能丢，至少简单功能要实现。

苦厄难夺凌云志 不死终有出头日

最后

以上就是迷人小馒头最近收集整理的关于thymeleaf中th:attr前言一、th:attr总结的全部内容，更多相关thymeleaf中th内容请搜索靠谱客的其他文章。