循环条件下:

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. 客户端GUI结构学习总结

    这几个月的开发工作主要是关于游戏内GUI的,业务开发之余也时常会看看客户端工程里的GUI系统这一块的代码,这里系统的总结下. 一.GUI树形结构 在GUI中所有的控件都遵循树形结构: 在客户端初始化时 ...

  2. 金蝶KIS客户端修改IP连接服务器的方法

    问题现象:服务器IP变更后,金蝶KIS客户端打开时提示多个错误,并会自动关闭,无法联网登录 1. 到下面位置修改注册表 Windows Registry Editor Version 5.00 [HK ...

  3. 12-低延迟、全接口（HMDI、DVI、YPb Pr、RGB）H.264全高清编码器解码器

    低延迟.全接口(HMDI.DVI.YPb Pr.RGB)H.264全高清编码器解码器 一.产品介绍  1.近零延时的H.264压缩到1920x1080p60  该产品提供分辨率为1920x1080p6 ...

  4. ELKStack之生产案例（下）

    ELKStack之生产案例(下) 链接:https://pan.baidu.com/s/1V2aYpB86ZzxL21Hf-AF1rA 提取码:7izv 复制这段内容后打开百度网盘手机App,操作更方 ...

  5. Djano中static和media文件路径的设置

    对于常用的css.js.image和常用的工具类在django项目中要设置一个全局的路径,对所有的app都可以访问到这个路径下的文件 1在django项目的setting文件中设置对应的static和 ...

  6. Java中的String、StringBuffer、StringBuilder区别以及Java之StringUtils的用法

    1.String.StringBuffer.StringBuilder的区别 String是Java中基础类型,是immutable类(不可变)的典型实现,利用string进行拼接是会产生过多无用对象 ...

  7. gensim word2vec |来自渣渣硕的学习笔记

    最近写论文跑模型,要用到word2vec,但是发现自己怎么也看不懂网上的帖子,还是自己笨吧,所以就有了我的第一篇博客!!!  关于word2vec工具打算写一个系列的,当然今天这篇文章只打算写: 如何 ...

  8. python3运行报错：TypeError: Object of type 'type' is not JSON serializable解决方法（详细）

    返回结果先转成str 字符创

  9. paper 162:卷积神经网络(CNN)解析

    卷积神经网络(CNN)解析: 卷积神经网络CNN解析 概揽 Layers used to build ConvNets 卷积层Convolutional layer 池化层Pooling Layer ...

  10. vue开发微信公众号--地图

    在最近开发的微信公众号中,要实现一个打卡功能: 由于个人感觉微信SDK里面的地图不太好用,所以使用了腾讯地图. 在项目中引入腾讯地图 1,需要登录腾讯地图网站,注册一个账户,获得一个key. 2,然后 ...