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里面写想要的样式就可以了

最简单的绑定(这里的active加不加单引号都可以,以下也一样都能渲染)

判断是否绑定一个active

或者

绑定并判断多个

第一种(用逗号隔开)

第二种(放在data里面)

//也可以把后面绑定的对象写在一个变量放在data里面,可以变成下面这样

第三种(使用computed属性)

单纯数组

(注意:三元运算符后面的“:”两边的class需要加上单引号,否则不能正确渲染)

或者

或者

或者

//前面这个active在对象里面可以不加单引号,后面这个sort要加单引号

或者

或者


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

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

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

发表评论

登录后才能评论

评论列表(0条)

保存