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

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内容请搜索靠谱客的其他文章。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(64)

评论列表共有 0 条评论

立即
投稿
返回
顶部