这次给大家带来vue.js点击操作class，vue.js点击操作class的注意事项有哪些，下面就是实战案例，一起来看一下。
最近使用vue需要实现一个点餐选择商品规格的页面，需要通过vue动态的给被点击的元素添加class名字，使其变色，其他的删除class。如图：
开始在网上找了许多办法发现不是太好用，最后找到一个发现还是不错的，记录一下
html：
<p class="weui-mask" id="guige">
<p class="guigebox">
<p class="guigetitle">{{guigename}}</p>
<p class="guigep guigep01">规格</p>
<p class="indexguige">
<span v-for="value,index in guigelist" v-on:click="guige(index)" v-bind:class="{on:index==guigespan}">{{value.guige_name}}</span>
</p>
<p class="guigep">口味</p>
<p class="indexkouwie">
<span v-for="value,index in kouweilist" v-on:click="kouwei(index)" v-bind:class="{on:index==kouweispan}">{{value.guige_name}}</span>
</p>
</p>
</p>
script:
var guige=new vue({
el: '#guige',
data:{
guigespan:-1, //控制点亮状态 -1为默认不点亮
kouweispan:-1, //控制点亮状态
},
methods:{
guige:function(index){ //当点击时候点亮，同级的span标签删除class
this.guigespan = index;
},
kouwei:function(index){
this.kouweispan = index;
},
}
})
相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！
推荐阅读：
vue实现三级联动
在vue中使用swiper插件
express默认日志组件morgan使用详解
以上就是vue.js点击操作class的详细内容。