vue动态绑定class选中当前列表变色的方法示例
更新时间：2018年12月19日 08:30:03 作者：花生奶糖
这篇文章主要介绍了vue动态绑定class选中当前列表变色的方法示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
这个小技巧在工作当中是非常实用而且经常用到的 希望小伙伴儿们能学到。
先看看效果图吧
接下来我们看看怎么实现的吧
在methods中写入一个方法
clickcategory(index){ // 这里我们传入一个当前值
this.categoryIndex = index
}
然后需要在data里面注册一下
data() {
return {
categoryIndex: 0, //点击当前背景变成白色索引
}
},
在css中设置我们当前选中项为active的类名，并给与一个白色的背景颜色
.active {
background: #fff
}
接下来在html中绑定
<li @click="clickCategory(index)" :class="{active:categoryIndex==index}"> <!-- 选中当前动态绑定class -->
</li>
嗯哼 于是乎我们的点击选中当前改变背景色就这样完成了
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了vue 动态绑定背景图片的方法,在文末给大家介绍了vue如何给v-for循环的标签添加背景图片，需要的朋友参考下吧2018-08-08
vue3使用自定义指令实现el dialog拖拽功能示例详解
这篇文章主要为大家介绍了vue3使用自定义指令实现el dialog拖拽功能示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-09-09
这篇文章主要为大家详细介绍了vue图片拖拉转放大缩小组件的使用，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-10-10
elementui中的el-cascader级联选择器的实践
本文主要介绍了elementui中的el-cascader级联选择器的实践，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-10-10
这篇文章主要介绍了vue增加强缓存和版本号的实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-05-05
这篇文章主要介绍了vue项目中使用axios遇到的相对路径和绝对路径问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-06-06
这篇文章主要给大家介绍了关于如何在Vue中使用Echarts实例图的相关资料，文中介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-10-10
这篇文章主要介绍了基于vue写微信小程序mpvue-docs跳转页面，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下2019-04-04
这篇文章主要为大家详细介绍了Vue生命周期和数据共享，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2022-02-02
这篇文章主要介绍了vue中input的v-model清空操作，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-09-09
最新评论