循环条件下:

1.点击函数@click="active(index)" 获取点击的位置

2.讲索引值传给class,点击哪一个则显示哪一个的样式

3.在data添加ins的初始值

4.使用三目运算符切换图片

三木运算符执行方法：如果index == ins为真，则显示imgItem.active的图片,否则显示imgItem.path的图片

5.书写active方法

6.效果

vue 实现active点击图片切换的更多相关文章

  1. Vue实现active点击切换

    Vue实现active点击切换 循环的情况: 1.点击时传入index索引(获取当前点击的是哪个) @click=“active(index)” 2.将索引值传入class(索引等于几就第几个添加ac ...

  2. Vue实现active点击切换样式

    1.html <div class="filter-nav" v-for="(item,index) in filterData.navTab" :key ...

  3. 导航菜单点击图片切换--jquery

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  4. 2018.7.2 如何用js实现点击图片切换为另一图片，再次点击恢复到原图片

    <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8&quo ...

  5. 基于jquery鼠标点击图片翻开切换效果

    基于jquery鼠标点击图片翻开切换效果是一款基于jQuery+CSS3实现的点击图片切换特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class=&quo ...

  6. 原生js实现多组图片切换

    这几天一直在练习原生js写效果,需要理清自己的逻辑,做了一个切换多组图片的效果: css样式: * { margin: 0; padding: 0; } body { background: #303 ...

  7. （1）vue点击图片预览（可旋转、翻转、缩放、上下切换、键盘操作）

    今天做项目的时候,遇到了新需求,需要把点击图片放大的功能.学习了一下GitHub上的viewerjs插件 GitHub地址:https://github.com/fengyuanchen/viewer ...

  8. vue项目 一行js代码搞定点击图片放大缩小

    一行js代码搞定xue项目需要点击图片放大缩小,其实主要用的是用到了vue:class的动态切换,内容比较简单.一开始我把维护的需求想得太复杂了,和测试小姐姐聊了一下才反应过来. 两个月不到跟了四个项 ...

  9. JQuery实现点击按钮切换图片(附源码)--JQuery基础

    JQuery实现切换图片相对比较简单,直接贴代码了哈,有注释噢!疑问请追加评论哈,不足之处还请大佬们指出! 1.案例代码: demo.html: <!DOCTYPE html><ht ...

随机推荐

  1. 机器学习-线性回归（基于R语言）

    基本概念 利用线性的方法,模拟因变量与一个或多个自变量之间的关系.自变量是模型输入值,因变量是模型基于自变量的输出值. 因变量是自变量线性叠加和的结果. 线性回归模型背后的逻辑——最小二乘法计算线性系 ...

  2. DTS

    一.DTS的加载过程   如果要使用Device Tree,首先用户要了解自己的硬件配置和系统运行参数,并把这些信息组织成Device Tree source file.通过DTC(Device Tr ...

  3. Linux知识-不断更新2

    为了自己看的更清楚,也为了不断的总结,每次更新后都会另发一篇. 工作中遇到某一文件夹磁盘空间不够,当然每次都是清理日志,最后发现还是不太行,还不能扩容,只能先想办法迁移目录,避免此问题发生,但在这之前 ...

  4. shell脚本实现ftp上传下载文件

    前段时间工作中需要将经过我司平台某些信息核验数据提取后上传到客户的FTP服务器上,以便于他们进行相关的信息比对核验.由于包含这些信息的主机只有4台,采取的策略是将生成的4个文件汇集到一个主机上,然后在 ...

  5. Linux学习笔记之磁盘与文件系统的管理

    三．Linux磁盘与文件系统的管理 MBR扇区(512B) 磁盘的分区组成 Boot sector    扇区(用来装引导程序) Super block   记录inode与Block的信息 Inod ...

  6. how to pass variable from shell script to sqlplus

    script sqlplus ${ORA_USR}/${ORA_PASS}@${ORA_DB} @${PARM}/TEST $new_usr $model_usr $new_pwd parm of s ...

  7. ubuntu 安装phpunit

    一.下载安装 wget https://phar.phpunit.de/phpunit-7.2.phar chmod +x phpunit-7.2.phar sudo mv phpunit-7.2.p ...

  8. JMeter生成UUID方式

    1. 使用JMeter工具中自带的函数__UUID 2. 使用Beanshell组件,在脚本中引入java.util.UUID,通过java来生成 import java.util.UUID; UUI ...

  9. 【Linux】crontab定时任务用用法

    cron是unix或者linux下用来定时任务的命令,大致的用法如下: 1.服务的启动和关闭 /sbin/service crond start   //启动服务 /sbin/service cron ...

  10. [CSP-S模拟测试]:序列（主席树）

    题目描述 小$A$把自己之前得到的序列展示给了小$B$,不过这一次,他并不要求小$B$模仿他之前的行为.他给了小$B$一些询问,每个询问都是$l\ r\ x$的形式,要求小$B$数出在序列的第$l$个 ...