这次给大家带来vue.js动态操作同级class，vue.js动态操作同级class的注意事项有哪些，下面就是实战案例，一起来看一下。
最近使用vue需要实现一个点餐选择商品规格的页面，需要通过vue动态的给被点击的元素添加class名字，使其变色，其他的删除class。如图：
开始在网上找了许多办法发现不是太好用，最后找到一个发现还是不错的，记录一下
html：
{{guigeName}}
规格
{{value.guige_name}}
口味
{{value.guige_name}}
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;
},
}
})相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
动力先锋仿阿里巴巴B2B电子商务系统
下载
前台功能介绍:1、网页首页显示有高级会员推荐，精品推荐，商业机会分类列表，最新供求信息，网站动态，推荐企业，行业动态等;2、商业机会栏目功能有：二级分类，已经带有详细分类的数据库，后台可以更改增加操作，并可以推荐公司，栏目分为分类显示信息，最新的采购、供应、合作和代理信息，搜索时同样按分类，信息，时间，交易类型等搜索;3、展厅展品栏目功能:二级分类，已经带有详细分类的数据库，后台可以更改增加操作，
