标签：点餐 color es2017 bind ima for cti click span
最近使用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
标签：点餐 color es2017 bind ima for cti click span
原文地址：http://www.cnblogs.com/yzy1/p/7740208.html
