thymeleaf中th:attr

---

前言

最近再跟着做谷粒商城项目，这是一个很老的项目了。尤其是前端是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多数情况下是为了保存一个数据在标签中，利用这个数据我们可以对标签进行操作！！

总结

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

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