thymeleaf中th:attr
- 前言
- 一、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多数情况下是为了保存一个数据在标签中,利用这个数据我们可以对标签进行操作!!
总结
作为后端,前端我们不能丢,至少简单功能要实现。
苦厄难夺凌云志 不死终有出头日
最后
以上就是迷人小馒头最近收集整理的关于thymeleaf中th:attr前言一、th:attr总结的全部内容,更多相关thymeleaf中th内容请搜索靠谱客的其他文章。
本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
发表评论 取消回复