Vue.js Implement Click to dynamically add Class and delete the implementation code of the same class Class

Recently used Vue needs to implement a page to select a product specification, you need to add a Class name to the clicked element via VUE, make it discolored, and other delete Class. As shown in the figure:

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

Since the beginning of the online finding is not too easy to use, and finally find a discovery or not bad, record

HTML:

  
{{guigeName}}

specification

{{value.guige_name} }

{Value.guige_name}}

VAR GuiGe = New Vue ({EL: ‘#Guige’, Data: {GuisePan: “- 1”, // Control light Status-1 is the default not to illuminate KOUWEISPAN: “- 1”, // Control light status}, methods: {guige: function (index) {// When you click, the SPAN tag deletes Class this. GuisePan = index;}, kouwei: function (index) {this.kouweispan = index;},}}
  
Summary

The above is the vue.js introduced by Xiaobian to achieve Class and delete the same class Class and delete the same class Class. I hope that everyone can help, if everyone If you have any questions, please leave a message, the small package will reply to everyone in time. Thank you very much for your support of Tumi Cloud Website!

© Copyright Notice
THE END
Just support it if you like
like0
share
comment Grab the couch

Please log in to comment