vue点击当前元素添加class 删除兄弟元素的class

vue点击当前元素添加class 删除兄弟元素的class,第1张

在vue中当我们要实现点击元素动态添加类名时,我们不能像JQ那样去用(xxx.addClass(‘class’).siblings().removeClass(‘class’))实现,那我们应该怎样去做呢

解决方案:

1.在data里面申明一个属性,默认值最好为数字类型,并且不得大于当前元素+所有兄弟元素的length,可以默认为0(第一个元素选中)

2.在当前元素中添加动态class: “:class”,使用v-bind进行绑定

3.给元素点击事件,传入当前元素的index,把元素当前的index赋值给data里面的申明的属性,这样就可以点击实现该效果

一.首先给想要添加class的元素,通过v-bind绑定一个class

二.在data中声明一个变量activeClass

三.在点击事件中

四.在style里面写想要的样式就可以了

1、重新设置class类名为【p-a-0】。

2、在保留【class=“p1”】的基础上再添加一个类名为【p-a-0】。

3、结果需删除【class=“addp1”】,完成后即可将jsp的class属性重新设置。


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/bake/11444958.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-16
下一篇 2023-05-16

发表评论

登录后才能评论

评论列表(0条)

保存