最近使用vue需要实现一个点餐选择商品规格的页面，需要通过vue动态的给被点击的元素添加class名字，使其变色，其他的删除class。如图：
开始在网上找了许多办法发现不是太好用，最后找到一个发现还是不错的，记录一下
html：
1 ???????<div class="weui-mask" id="guige"> 2 ????????????????<div class="guigeBox"> 3 ????????????????????<p class="guigeTitle">{{guigeName}}</p> 4 ????????????????????<p class="guigeP guigeP01">规格</p> 5 ????????????????????<div class="indexGuiGe"> 6 ????????????????????????<span v-for="value,index in guigeList" v-on:click="guige(index)" v-bind:class="{on:index==guigeSpan}">{{value.guige_name}}</span> 7 ????????????????????</div> 8 ????????????????????<p class="guigeP">口味</p> 9 ????????????????????<div class="indexKouwie">10 ????????????????????????<span v-for="value,index in kouweiList" v-on:click="kouwei(index)" v-bind:class="{on:index==kouweiSpan}">{{value.guige_name}}</span>11 ????????????????????</div>15 ????????????????</div>16 ????????????</div>script:
1 ?????????????var guige=new Vue({ 2 ????????????????el: ‘#guige‘, 3 ????????????????data:{ 4 ????????????????????guigeSpan:"-1", ?//控制点亮状态 -1为默认不点亮 5 ????????????????????kouweiSpan:"-1", ?//控制点亮状态 ?6 ????????????????}, 7 ????????????methods:{ 8 ????????????????????guige:function(index){ ?//当点击时候点亮，同级的span标签删除Class 9 ????????????????????????this.guigeSpan = index;10 ????????????????????},11 ????????????????????kouwei:function(index){12 ????????????????????????this.kouweiSpan = index;13 ????????????????????},14 ???????????????}15 ????????????})参考：http://blog.csdn.net/xiao_yu_liu/article/details/55515244
vue.js实现点击后动态添加class及删除同级class
原文地址：http://www.cnblogs.com/yzy1/p/7740208.html