循环条件下:

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. Spring Boot 项目 Maven 配置

    在配置基于Maven的Spring Boot项目的过程中,打包运行出现了一系列错误. 比如: mvn 中没有主清单属性.java.lang.NoClassDefFoundError: org/spri ...

  2. IDS4授权分析

    一.授权过程的场景名词 RO (resource owner): 资源所有者:用户. Resource Owner:简单理解为资源拥有者,文中称“user”: RS (resource server) ...

  3. 洛谷P1446/BZOJ1004 Cards Burnside引理+01背包

    题意:有n张牌,有R+G+B=n的3种颜色及其数量,要求用这三种颜色去染n张牌.n张牌有m中洗牌方式,问在不同洗牌方式下本质相同的染色方案数. 解法:这道题非常有意思,题解参考Hzwer学长的.我这里 ...

  4. procixx地址

    \\192.168.35.7\Download\Builds\procixx_psoc

  5. P与C

    P是排列:与次序有关,P(5.3)=5*4*3 C是组合:与次序无关,C(5.3)=(5*4*3)/(3*2*1)

  6. Hadoop中的排序和连接

    MapReduce的全排序 主要是为了保证分区排序,即第一个分区的最后一个Key值小于第二个分区的第一个Key值 与普通的排序仅仅多一个自定义分区类MyPartitioner见自己所写的实验 (设置一 ...

  7. find命令进阶用法（一）

    -cmin n: 查找 exactly n 分钟前内容或属性被最后修过的文件 -cnewer file: 查找内容或属性的最后修改时间晚于file文件的文件 -ctime n: 查找 **n*24** ...

  8. 前端必用正则(js)

    手机号 /^1((3[\d])|(4[5,6,9])|(5[0-3,5-9])|(6[5-7])|(7[0-8])|(8[1-3,5-8])|(9[1,8,9]))\d{8}$/ 大写字母 /^[A- ...

  9. SQL server 2008 数据库优化常用脚本

    --查询某个数据库的连接数 select count(*) from Master.dbo.SysProcesses where dbid=db_id() --前名其他等待类型 * from sys. ...

  10. JS基础入门篇（六）— 数据类型

    1.数据类型 数据类型:我感觉就是对数据的种类进行分类.就好比把人分为儿童,青少年,中年,老年一样. 基础数据类型: Number(数字),String(字符串),Null(空),Undefined( ...