vue.js实现点击后动态添加类及删除同级类的实现代码 - 行业资讯

最近使用vue需要实现一个点餐选择商品规格的页面,需要通过vue动态的给被点击的元素添加类名字,使其变色,其他的删除类。如图:

开始在网上找了许多办法发现不是太好,用最后找到一个发现还是不错的,记录一下

　　html:

　　　　　　& lt; div类=" weui-mask " id=癵uige”比; 　　& lt; div类=癵uigeBox”比; 　　& lt; p class=" guigeTitle”在{{guigeName}} & lt;/p> 　　& lt; p class=" guigeP guigeP01”祝辞规格& lt;/p> 　　& lt; div类=癷ndexGuiGe”比; 　　& lt;跨度v=癵uigeList价值,指数”v:点击=癵uige(指数)”v-bind: class="{:指数==guigeSpan}”在{{value.guige_name}} & lt;/span> 　　& lt;/div> 　　& lt; p class=" guigeP”祝辞口味& lt;/p> 　　& lt; div类=癷ndexKouwie”比; 　　& lt;跨度v=発ouweiList价值,指数”v:点击=発ouwei(指数)”v-bind: class="{:指数==kouweiSpan}”在{{value.guige_name}} & lt;/span> 　　& lt;/div> 　　& lt;/div> 　　& lt;/div> 　　　　

脚本: 　　　　　　var guige=new Vue ({ 　　埃尔:“# guige ', 　　数据:{ 　　guigeSpan: " 1 ",//控制点亮状态1为默认不点亮　　kouweiSpan: " 1 ",//控制点亮状态　　}, 　　方法:{ 　　guige:函数(指数){//当点击时候点亮,同级的跨度标签删除类　　这一点。guigeSpan=指数; 　　}, 　　kouwei:函数(指数){ 　　这一点。kouweiSpan=指数; 　　}, 　　} 　　}) 　　　　

以上所述是小编给大家介绍的vue.js实现点击后动态添加类及删除同级类,希望对大家有所帮助,如果大家有任何疑问请给我留的言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!