The recent use of Vue needs to implement a menu to select the Product specification page, you need to add the class name to the clicked element dynamically by Vue, make it color, and delete the class.
Started on the internet to find a lot of ways to find not too good, and finally found a find is good, record
Html:
1 <Divclass= "Weui-mask"ID= "Guige">2 <Divclass= "Guigebox">3 <Pclass= "Guigetitle">{{Guigename}}</P>4 <Pclass= "Guigep guigeP01">Specifications</P>5 <Divclass= "Indexguige">6 <spanv-for= "Value,index in Guigelist"V-on:click= "Guige (index)"V-bind:class= "{On:index==guigespan}">{{Value.guige_name}}</span>7 </Div>8 <Pclass= "Guigep">Taste</P>9 <Divclass= "Indexkouwie">Ten <spanv-for= "Value,index in Kouweilist"V-on:click= "Kouwei (index)"V-bind:class= "{On:index==kouweispan}">{{Value.guige_name}}</span> One </Div> the </Div> - </Div>
Script
1 varGuige=NewVue ({2El: ' #guige ',3 data:{4Guigespan: "-1",//control Lit Status-1 is not lit by default5Kouweispan: "-1",//control lit State6 },7 methods:{8Guige:function(Index) {//When clicked, the span tag of the same class is deleted .9 This. Guigespan =index;Ten }, OneKouwei:function(index) { A This. Kouweispan =index; - }, - } the})
Reference: http://blog.csdn.net/xiao_yu_liu/article/details/55515244
Vue.js Add class and delete sibling class dynamically after click