循环条件下:

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. Python Web开发:使用Django框架创建HolleWorld项目

    开发环境搭建 Python环境安装 下载地址:https://www.python.org/downloads// Django安装 打开Windows CMD输入pip install django ...

  2. HTML5:Canvas-绘制图形

    到本文的最后,你将学会如何绘制矩形,三角形,直线,圆弧和曲线,变得熟悉这些基本的形状.绘制物体到Canvas前,需掌握路径,我们看看到底怎么做. 栅格 在我们开始画图之前,我们需要了解一下画布栅格(c ...

  3. JavaScript实例之计算器

    代码实例: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

  4. Java类加载顺序练习题

    一.题目 public class Test { public static Test t1 = new Test();// 标记1 // 普通代码块 { System.out.println(&qu ...

  5. Java中File类重修

    IO流 概述 io流:输入输出流(input/output).流是一组有顺序的,有起点和终点的字节集合,是对各种数据传输的总称或抽象.即数据在两设备之间的传输称为流.流的本质是数据传输. InputS ...

  6. java Map的四种遍历方式

    1.这是最常见的并且在大多数情况下也是最可取的遍历方式,在键值都需要时使用. Map<Integer, Integer> map = new HashMap<Integer, Int ...

  7. tensorflow函数介绍(1)

    tensorflow中的tensor表示一种数据结构,而flow则表现为一种计算模型,两者合起来就是通过计算图的形式来进行计算表述,其每个计算都是计算图上的一个节点,节点间的边表示了计算之间的依赖关系 ...

  8. 使用idea搭建Spring boot+jsp的简单web项目

    大家好: 这是我的第一篇博客文章,简单介绍一下Spring boot + jsp 的搭建流程,希望给跟我一样新接触Spring boot的读者一点儿启发. 开发工具:jdk1.8   idea2017 ...

  9. gensim Load embeddings

    gensim package from gensim.models.keyedvectors import KeyedVectors twitter_embedding_path = 'twitter ...

  10. 进程管理工具uptime,top,htop

    进程管理工具uptime,top,htop 一uptime 显示当前时间,系统已启动的时间.当前上线人数,系统平均负载(1.5.10分钟的平均负载,一般不会超过1) 系统平均负载:指在特定时间间隔内运 ...