作者:严重孤独症患者_855 | 来源:互联网 | 2022-09-06 00:40
最近使用vue需要实现一个点餐选择商品规格的页面,需要通过vue动态的给被点击的元素添加class名字,使其变色,其他的删除class。如图:
开始在网上找了许多办法发现不是太好用,最后找到一个发现还是不错的,记录一下
html:
{{guigeName}}
规格
{{value.guige_name}}
口味
{{value.guige_name}}
script:
var guige=new Vue({
el: '#guige',
data:{
guigeSpan:"-1", //控制点亮状态 -1为默认不点亮
kouweiSpan:"-1", //控制点亮状态
},
methods:{
guige:function(index){ //当点击时候点亮,同级的span标签删除Class
this.guigeSpan = index;
},
kouwei:function(index){
this.kouweiSpan = index;
},
}
})
总结
以上所述是小编给大家介绍的vue.js实现点击后动态添加class及删除同级class,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!