循环条件下:

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. query_module - 向内核查询和模块有关的各个位

    总览 #include <linux/module.h> int query_module(const char *name, int which,void *buf, size_t bu ...

  2. "=="、equals、hashCode之间的区别

    1. "=="分为两种情况: (1) 基本数据类型,比较的是其对应的值是否相等: (2) 引用类型,比较的是他们在内存中存放的地址(或者说,是否指向同意对象). 2. equals ...

  3. 在Linux服务器上运行jar包，并且使jar包一直处于后台执行

    1.我jar包在linux的目录为/a/bbb.jar         正常情况下,使用在/a目录下使用  java -jar bbb.jar 可以直接运行该jar包的项目,运行成功之后使用crtl+ ...

  4. Sass-加法

    程序中的运算是常见的一件事情,但在 CSS 中能做运算的,到目前为止仅有 calc() 函数可行.但在 Sass 中,运算只是其基本特性之一.在 Sass 中可以做各种数学计算 (一).加法 加法运算 ...

  5. 利用jmeter发起java请求调用shell脚本

    1.创建maven项目 在pom文件中加入依赖:     2.在路径src/main/java下创建类,如类名shellclass                     3.      创建jmet ...

  6. ARC093F Dark Horse 容斥原理+DP

    题目传送门 https://atcoder.jp/contests/arc093/tasks/arc093_d 题解 由于不论 \(1\) 在哪个位置,一轮轮下来,基本上过程都是相似的,所以不妨假设 ...

  7. DELPHI 10 SEATTLE 在OSX上安装PASERVER

    旧版本的DELPHI在安装目录下里的PASERVER目录有安装文件,但奇怪在这个SEATTLE上的PASERVER目录下只有一个EXE程序的安装程序​​,显然不能安装到OSX里,需要在Embarcad ...

  8. Java IO流总结（二）-示例

    1.使用文件操作的9大方法完成文件的判断 判断文件或目录是否存在 : exits() 返回值boolean型 * 判断是否是文件: isFile() boolean * 判断是否是目录: isDiec ...

  9. npm 常见错误记录

    1.Module build failed: ReferenceError: Unknown plugin "import" specified in "base&quo ...

  10. SDK与API的理解

    1.SDK SDK (Software Development Kit):软件开发工具包,一般都是软件工程师为特定的软件包.软件框架.硬件平台.操作系统等建立应用软件时的开发工具的集合. SDK (S ...