循环条件下:

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. 二、RabbitMQ操作

    1.RabbitMQ发送与接收. 2.RabbitMQ发送与接收. 3.RabbitMQ发送与接收.

  2. Redis5.0集群搭建实战

    安装环境: 6台 centos7.4 在各个节点下载官网release包,可以自己去官网找: wget  http://download.redis.io/releases/redis-5.0.5.t ...

  3. Codecraft-17 and Codeforces Round #391 - A

    题目链接:http://codeforces.com/contest/757/problem/A 题意:给定一个字符串,问你从这个字符串中选出一些字符然后重新排序后最多能组成多少个 Bulbasaur ...

  4. Java1.7与1.8新特性

    Java 1.7: switch中可以使用字符串 List<String> list = new ArrayList<>(),即泛型实例化类型自动推断 try块可以不用fina ...

  5. python数字图像处理（三）边缘检测常用算子

    在该文将介绍基本的几种应用于边缘检测的滤波器,首先我们读入saber用来做为示例的图像 #读入图像代码,在此之前应当引入必要的opencv matplotlib numpy saber = cv2.i ...

  6. elasticsearch添加访问密码

    1.将x-pack复制到elasticsearch的plugins目录下面 2.启动elasticsearch .bin/elasticsearch & 3.修改指定用户密码 PUT http ...

  7. html5 带声音的导航

    代码实例: <!DOCTYPE html PUBLIC "-//W3C//DTDXHTML 1.0 Transitional//EN""http://www.w3. ...

  8. Ubuntu12.04安装配置x11vnc

    全程在root下进行 安装x11vnc sudo apt-get install vino vinagre x11vnc 设置密码 sudo x11vnc -storepasswd sudo x11v ...

  9. hdu 5868:Different Circle Permutation 【Polya计数】

    似乎是比较基础的一道用到polya定理的题,为了这道题扣了半天组合数学和数论. 等价的题意:可以当成是给正n边形的顶点染色,旋转同构,两种颜色,假设是红蓝,相邻顶点不能同时为蓝. 大概思路:在不考虑旋 ...

  10. python在windows中运行文件

    "d:Program Files\python35\python.exe" hello.txt