Vue实现active点击切换方法
更新时间：2018年03月16日 09:15:46 作者：小破孩呦
下面小编就为大家分享一篇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实现active点击切换方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
在项目中很多时候需要用到vue打包成html不需要放在服务器上就能浏览,根据官网打包出来的html直接打开是显示空白,下面这篇文章主要给大家介绍了关于vue打包后出现空白页的原因及解决方式的相关资料,需要的朋友可以参考下2022-07-07
这篇文章主要介绍了深入浅出vue图片路径的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-09-09
这篇文章主要介绍了Vue 修改网站图标的方法，帮助大家更好的理解和使用vue框架，感兴趣的朋友可以了解下2020-12-12
class 与 style 绑定就是专门用来实现动态样式效果的技术,如果需要动态绑定 class 或 style 样式,可以使用 v-bind 绑定,本文给大家讲解Vue 绑定style和class样式,感兴趣的朋友一起看看吧2023-10-10
这篇文章主要为大家详细介绍了vue3+vite2实现动态绑定图片的优雅解决方案,文中的示例代码简洁易懂,感兴趣的小伙伴可以跟随小编一起学习一下2023-08-08
数据缓存可以提高应用程序的性能,减少网络请求,提高用户体验,在本文中,我们介绍了Vue中如何进行数据缓存,并提供了一些示例代码,具有一定的参考价值,感兴趣的可以了解一下2023-09-09
最近项目需要将原vue项目结合ts的使用进行改造，本文从安装到vue组件编写进行了说明，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-11-11
这篇文章主要介绍了vue项目中Eslint校验代码报错的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
这篇文章主要介绍了代码详解Vuejs响应式原理的基础知识，有兴趣的朋友们参考学习下吧。2017-12-12
Vue结合openlayers按照经纬度坐标实现锚地标记及绘制多边形区域
OpenLayers是一个用于开发WebGIS客户端的JavaScript包，最初基于BSD许可发行。OpenLayers是一个开源的项目，其设计之意是为互联网客户端提供强大的地图展示功能，包括地图数据显示与相关操作，并具有灵活的扩展机制2022-09-09
最新评论