vue.js实现了点击后动态添加类和删除同级类的实现代码

最近，使用vue需要实现一页订购和选择商品规格。需要通过vue动态地给被点击的元素添加类名，使其改变颜色，并删除其他类。如图所示：

一开始在网上找了很多方法，发现不是很好用。最后，我发现了一个很好的发现，并记录了下来

html:

div class=' weui-mask ' id=' guige ' div class=' guigebox ' p class=' guigtitle ' { { guigename } }/p p class=' guigep guige P01 '规范/p div class=' Index guige ' span v-for=' value，Index in guigelist ' v-: click=' guige(Index)' v-bind : class=' { : Index==guigespan } ' { { value。guige _ name } }/span/div p class=' guigep ' taste/p div class=' index kouwei ' span v-for=' value，index in kouwilist ' v-: click=' kouwei(index)' v-bind : class=' { : index==kouwispan } ' { { value . guige _ name } }/span/div/div/div script :

varguige=new vue({ El : ' # guige '，data: {guigespan :' -1 '，//控制照明状态-1默认不照明Kouwaispan:'-1 '，//控制照明状态}。方法： {guige:函数(索引){//点击时亮起，同级的span标签删除Class this.guigeSpan=index}，kou Wei : function(index){ this . kou weispan=index；}，}})摘要

以上是边肖给大家介绍的vue.js，点击后可以动态添加类，删除同级类。希望对你有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！