前言

最近再跟着做谷粒商城项目，这是一个很老的项目了。尤其是前端是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相关推荐

thymeleaf 中select下拉回显
thymeleaf中的select下拉回显的问题找了网上很大一圈相关的解决方案没一个管用,最后还是它处理了进行回显作用的.
jQuery中的attr()与prop()设置属性、获取属性的区别
举例,比如我们要获取checkbox的属性或者设置checkbox选中或不选中. $("#editForm").find("input[type='checkbox']& ...
在学习thymeleaf中，给function 方法传Controller传递过来的参数，报错：Uncaught SyntaxError: missing ) after argument list
在学习thymeleaf中,给function 方法传Controller传递过来的参数. 报错:Uncaught SyntaxError: missing ) after argument list ...
【Thymeleaf】Thymeleaf中的判断语句
目录 IF判断 Switch Case unless IF判断 Thymeleaf 条件 gt:great than(大于)> ge:great equal(大于等于)>= eq:equa ...
thymeleaf中的/*[[@{})}]]*/语法
最近在写折腾李仁密老师个人博客的时候遇到的坑点分享一下在写动态替换评论模块的js的时候发现load请求一直没有发送 ``` $(function () { $("#comment-co ...
Spring Boot Thymeleaf中使用Shiro标签
在<Spring-Boot-shiro权限控制>中,当用户访问没有权限的资源时,我们采取的做法是跳转到403页面,但在实际项目中更为常见的做法是只显示当前用户拥有访问权限的资源链接.配合T ...
Thymeleaf中th:href、th:src、th:onclick
Thymeleaf 中 th:href.th:src.th:onclick需要拼接动态数据时(后端传递的动态数据),需要遵守相关的语法规定. 一般来说,上面的三种表达式都需要用到@{xxx},如< ...
thymeleaf中img标签，如果有图片显示图片，没有图片显示默认图片
转载自: 转载thymeleaf中img标签问题 <img class="layui-nav-img" th:src="${(user.avatarUrl != n ...
Thymeleaf 中js 使用等报错问题
Thymeleaf 完善本博客的过程中,发现Thymeleaf有点玩不动了. js里面if判断&&时报了个错:在实体引用中,实体名称必须紧跟在'&' SAX解析异常. cont ...

thymeleaf中th:attr

thymeleaf中th:attr

前言

一、th:attr

实例

总结

thymeleaf中th:attr相关推荐

最新文章

热门文章