循环条件下:

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. linux改变内核参数

  2. 续上文，中的\\u00a0是怎么解释出来的

    public String utf8ToUnicode(String inStr) { char[] myBuffer = inStr.toCharArray(); StringBuffer sb = ...

  3. go语言从例子开始之Example32.打点器

    定时器 是当你想要在未来某一刻执行一次时使用的 - 打点器 则是当你想要在固定的时间间隔重复执行准备的.这里是一个打点器的例子,它将定时的执行,直到我们将它停止. Example: package m ...

  4. 【抓包工具之Fiddler】导出jmeter脚本

    一.下载完成后,解压压缩包,将插件中的2个文件放入到Fiddler安装目录中   插件目录     二.打开fiddler,设置测试时过滤的条件(抓包可以指定域名的请求)   设置过滤条件 三.这里我 ...

  5. LOJ149 0/1分数规划

    竟然没有写过分数规划的题解 考前挣扎一发板子( 二分答案k 然后0/1分数规划的方法就是 分母乘过去然后贪心解决 注意实数二分的精度 一般估计一个次数比较好不然容易出现精度比较误差[惨痛教训 就做完了 ...

  6. BZOJ2695 保护古迹

    非常带劲之计算几何 写的头晕= = 就是平面图转对偶图然后最小割 由于p非常小我们枚举所有保护状态然后割一下 建图真的烦 就是把区域划分出来看一下每一个古迹点是否被小区域包含[好像也可以写点定位] 然 ...

  7. PL/SQL-FOR UPDATE 与 FOR UPDATE OF的区别

    PL/SQL-FOR UPDATE 与 FOR UPDATE OF的区别 数据库 oracle for update of   和   for update区别     select * from T ...

  8. HTTP： 状态码200~505说明

    HTTP状态码(HTTP Status Code) 一些常见的状态码为: 200 - 服务器成功返回网页 404 - 请求的网页不存在 503 - 服务不可用 所有状态解释: 1xx(临时响应) 表示 ...

  9. Linux中Hard link和Symbol link的区别

    Hard link Hard link不能指向不在同一磁盘的文件 Hard link不能指向目录 Hard link与源文件几乎没有区别.只能通过ls -li看出link关系.另外,删除源文件后,Ha ...

  10. Linux命令"ls"进阶说明

    pwd:the current working directory cd -: return to the previous working directory Filenames that begi ...