vue.js实现点击后动态添加class及删除同级class的实现代码
更新时间：2018年04月04日 09:45:03 作者：我的益达
这篇文章主要介绍了vue.js实现点击后动态添加class及删除同级class的相关资料,需要的朋友可以参考下
最近使用vue需要实现一个点餐选择商品规格的页面，需要通过vue动态的给被点击的元素添加class名字，使其变色，其他的删除class。如图：
开始在网上找了许多办法发现不是太好用，最后找到一个发现还是不错的，记录一下
html：
<div class="weui-mask" id="guige">
<div class="guigeBox">
<p class="guigeTitle">{{guigeName}}</p>
<p class="guigeP guigeP01">规格</p>
<div class="indexGuiGe">
<span v-for="value,index in guigeList" v-on:click="guige(index)" v-bind:class="{on:index==guigeSpan}">{{value.guige_name}}</span>
</div>
<p class="guigeP">口味</p>
<div class="indexKouwie">
<span v-for="value,index in kouweiList" v-on:click="kouwei(index)" v-bind:class="{on:index==kouweiSpan}">{{value.guige_name}}</span>
</div>
</div>
</div>
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.js实现点击后动态添加class及删除同级class，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
相关文章
如何在vue3.0+中使用tinymce及实现多图上传文件上传公式编辑功能
本文给大家分享tinymce编辑器如何在vue3.0+中使用tinymce及实现多图上传文件上传公式编辑功能，tinymce安装方法文中也给大家详细介绍了，对vue tinymce实现上传公式编辑相关知识感兴趣的朋友跟随小编一起学习下吧2021-05-05
这篇文章主要介绍了Vue入口文件index.html缓存的问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-03-03
在 Vue 2 中,在 v-for 里使用的 ref attribute会用ref 数组填充相应的 $refs property,本文给大家介绍Vue 3.0 v-for中的Ref数组的相关知识,感兴趣的朋友一起看看吧2023-12-12
这篇文章主要介绍了vue获取input输入值的问题解决办法的相关资料,希望通过本文能帮助到大家，让大家掌握这样的问题，需要的朋友可以参考下2017-10-10
这篇文章主要介绍了cdn模式下vue的基本用法，本文通过图文并茂的形式给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友参考下吧2018-10-10
在现代Web应用中,前端路由控制是非常重要的一部分,它可以帮助我们将不同的页面内容展示给用户,同时保持用户在浏览不同页面时的连贯性,本文将介绍如何使用Vue Router来实现前端路由控制,需要的朋友可以参考下2024-10-10
这篇文章主要介绍了Vue Electron实现输入法自动刷字数功能，文中的示例代码讲解详细，对我们学习C#有一定的帮助，感兴趣的小伙伴可以跟随小编一起了解一下2022-12-12
这篇文章主要介绍了vue2 利用echarts 单独绘制省份,首先引入所需要的第三方模块，通过示例代码给大家介绍的非常详细，文章末尾给大家补充介绍了vue2.x结合echarts2实现显示具体省份热力图的问题，需要的朋友可以参考下2022-01-01
这篇文章主要介绍了Vue源码解析之Template转化为AST的实现方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-12-12
这篇文章主要介绍了Vue添加请求拦截器及vue-resource 拦截器使用,需要的朋友可以参考下2017-11-11
最新评论