这次给大家带来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;      },     }    })
相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！
推荐阅读：
angularjs应用模块化的使用详解
js怎样实现dom插入节点
以上就是vue.js实现操作class的方法的详细内容。