下面我就为大家分享一篇vue实现active点击切换方法，具有很好的参考价值，希望对大家有所帮助。
循环的情况：
1、点击时传入index索引（获取当前点击的是哪个）
@click="active(index)"
2、将索引值传入class（索引等于几就第几个添加active类）
立即学习“前端免费学习笔记（深入）”；
:class="{active:index==ins}"3、在data里边添加ins：0（表示默认第一个添加active类）
data{ ins：0 }4、最后在methods里边添加方法
ctive (num) {
this.ins=num
}非循环的情况：
1、在标签内写入点击事件和添加的class样式
注释： :class="{active:shows==1}"就是说当shows==1时添加class=active，否则不添加。
2、在methods里边定义方法
效果如下：
到此就完成了点击切换效果。
附加：
使用三木运算符实现筛选箭头切换
上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
详解VUE 对element-ui中的ElTableColumn扩展
以上就是Vue实现active点击切换方法的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告![ThinkPHP5快速开发企业站点[全程实录]](https://img.php.cn/upload/course/000/000/068/6253d918a3ce7278.png)
收藏
收藏
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
289
