vue点击增加class_vue.js实现点击后动态添加class及删除同级class的实现代码

最近使用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，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！