这篇文章主要介绍了Vue如何动态绑定class选中当前列表变色的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇vue如何动态绑定class选中当前列表变色文章都会有所收获,下面我们一起来看看吧。在methods中
这篇文章主要介绍了Vue如何动态绑定class选中当前列表变色的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇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具体轻量级框架、简单易学、双向数据绑定、组件化、数据和结构的分离、虚拟DOM、运行速度快等优势,Vue中页面使用的是局部刷新,不用每次跳转页面都要请求所有数据和dom,可以大大提升访问速度和用户体验。
关于“vue如何动态绑定class选中当前列表变色”这篇文章的内容就介绍到这里,感谢各位的阅读!相信大家对“vue如何动态绑定class选中当前列表变色”知识都有一定的了解,大家如果还想学习更多知识,欢迎关注编程网精选频道。
--结束END--
本文标题: vue如何动态绑定class选中当前列表变色
本文链接: https://www.lsjlt.com/news/346249.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-05-16
2024-05-16
2024-05-16
2024-05-16
2024-05-16
2024-05-16
2024-05-16
2024-05-16
2024-05-16
2024-05-16
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0