thymeleaf中th:attr前言一、th:attr总结

100 阅读 0 评论 66 点赞

我是靠谱客的博主迷人小馒头，这篇文章主要介绍thymeleaf中th:attr前言一、th:attr总结，现在分享给大家，希望可以做个参考。

thymeleaf中th:attr

前言
一、th:attr
- 实例
总结

前言

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

一、th:attr

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

实例

复制代码

1
2
3
4
5
6
7
	<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代码看他的用处

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
	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);
});