<!DOCTYPE html>

<html>

<head>

    <title>

    </title>

</head>

<body>

<div id="app">

    <ol>

        <li v-for="(item,key,index) in obj"><input type="button" :value="key" name="" @click="changeImage"></li>

    </ol>

    <div>

        <img :src="imgSrc">

    </div>

</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

<script type="text/javascript"></script>

<script type="text/javascript">

//在原生js中使用

var obj={

    name:'Source/image/r1.jpg',

    name1:'Source/image/r2.jpg',

    name2:'Source/image/r3.jpg'

};

new Vue({

  el: '#app',

  data: {

       obj,

       imgSrc:'Source/image/r1.jpg'

  },

  methods:{

    changeImage:function(event){

    this.imgSrc=this.obj[event.target.value];

    }

  }

})

</script>

</body>

</html>

实例1

<!DOCTYPE html>

<html>

<head>

    <title>

    </title>

    <style type="text/css">

      .active{

        background-color: blue;

      }

    </style>

</head>

<body>

<div id="app">

    <ol>

        <li v-for="(item,key,index) in obj" v-bind:class="index==imgIndex?'active':''"><input type="button" :value="key" name="" @click="changeImage(index,$event)"></li>

    </ol>

    <div>

        <img :src="imgSrc">

    </div>

</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

<script type="text/javascript"></script>

<script type="text/javascript">

//在原生js中使用

var obj={

    name:'Source/image/1.jpg',

    name1:'Source/image/2.jpg',

    name2:'Source/image/3.jpg'

};

new Vue({

  el: '#app',

  data: {

       imgIndex:0,

       obj,

       imgSrc:'Source/image/1.jpg'

  },

  methods:{

    changeImage:function(index,event){

    this.imgSrc=this.obj[event.target.value];

    this.imgIndex=index;

    }

  }

})

</script>

</body>

</html>

实例2

image的src使用相对路径，效果如下图

2021-7-7 Vue实现切换图片功能代码的更多相关文章

  1. vue动态切换图片

    1.踩的一个坑是:直接获取对象,使用style改变其背景图地址或者对img标签改变src值 因为经过vue经过打包编译后,图片地址已经被处理了,这时更新地址是无效的,会找不到图片. 所以可以用多个标签 ...

  2. JQuery------实现点击左右按钮，切换图片功能

    如图: 代码: html @*商品主图片*@ <div class="product-img" style="display:table-cell;width:40 ...

  3. Jquery的动态切换图片

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. vue项目中图片预览旋转功能

    最近项目中需要在图片预览时,可以旋转图片预览,在网上找了下,发现有一款功能强大的图片组件:viewerjs. git-hup: https://github.com/fengyuanchen/view ...

  5. 基于vue2.0打造移动商城页面实践 vue实现商城购物车功能 基于Vue、Vuex、Vue-router实现的购物商城(原生切换动画)效果

    基于vue2.0打造移动商城页面实践 地址:https://www.jianshu.com/p/2129bc4d40e9 vue实现商城购物车功能 地址:http://www.jb51.net/art ...

  6. vue学习09 图片切换

    目录 vue学习09 图片切换 定义图片数组:imgList:[],列表数据使用数组保存 添加图片索引:index 绑定src属性:使用v-bind,v-bind指令可以设置元素属性,比如src 图片 ...

  7. wpf图片浏览器，实现缩放平移操作图片切换等功能

    wpf经常要用到控件来查看图片,尤其是高清图片,于是做了一个例子: 1.定义图片的队列,用list来存. private readonly List<string> files; 2.切换 ...

  8. Vue PC端图片预览插件

    *手上的项目刚刚搞完了,记录一下项目中遇到的问题,留做笔记: 需求: 在项目中,需要展示用户上传的一些图片,我从后台接口拿到图片url后放在页面上展示,因为被图片我设置了宽度限制(150px),所以图 ...

  9. javascript设计模式实践之职责链--具有百叶窗切换图片效果的JQuery插件（三）

    在上一篇<javascript设计模式实践之模板方法--具有百叶窗切换图片效果的JQuery插件(二)>里,通过采用模板方法模式完成了切换效果对象的构建编写. 接下来就是完成各效果对象的调 ...

  10. javascript设计模式实践之模板方法--具有百叶窗切换图片效果的JQuery插件（二）

    在上一篇<javascript设计模式实践之迭代器--具有百叶窗切换图片效果的JQuery插件(一)>里,通过采用迭代器模式完成了各初始化函数的定义和调用. 接下来就要完成各个切换效果的编 ...

随机推荐

  1. 机器学习04-(决策树、集合算法：AdaBoost模型、BBDT、随机森林、分类模型：逻辑回归)

    机器学习04 机器学习-04 集合算法 AdaBoost模型(正向激励) 特征重要性 GBDT 自助聚合 随机森林 分类模型 什么问题属于分类问题? 逻辑回归 代码总结 波士顿房屋价格数据分析与房价预 ...

  2. AppScan-使用入门

    一.介绍 AppScan是IBM公司出的一款Web应用安全测试工具,采用黑盒测试的方式,可以扫描常见的web应用安全漏洞 工作原理 首先是根据起始页爬取站下所有可见的页面,同时测试常见的管理后台 获得 ...

  3. 用Aspose-Java免费实现 PDF、Word、Excel、Word互相转换并将转换过得文件上传OSS，返回转换后的文件路径

    嘿嘿嘿.嘿嘿,俺又回来了! github代码地址 https://github.com/Tom-shushu/work-study 接口文档有道云 https://note.youdao.com/s/ ...

  4. 【Visual C#】基于《斗鱼弹幕服务器第三方接入协议v1.6.2》实现斗鱼弹幕服务器接入

    最近在给某个主播开发斗鱼直播间辅助工具,为了程序的高效稳定,也搜索了大量的资料,经过大量什么百度,谷歌搜索... 虽然有很多Python的脚本及JS脚本实现了拉取斗鱼弹幕信息,但是这些年来的开发职业病 ...

  5. 2020-09-16：谈谈TCP的控制位？

    福哥答案2020-09-16:#福大大架构师每日一题# 福哥口诀法:紧确推和复同终(紧急位URG,确认位ACK,推送位PSH,复位位RST,同步位SYN,终止位FIN). [答案来自此链接](http ...

  6. 函数strncpy和memcpy的区别

    1定义 1.1 memcpy void *memcpy(void *destin, void *source, unsigned n); 参数 *destin ---- 需要粘贴的新数据(地址) *s ...

  7. HashMap 底层是如何实现的？

    HashMap 在不同的 JDK 版本下的实现是不同的,在 JDK 1.7 时,HashMap 底层是通过数组 + 链表实现的:而在 JDK 1.8 时,HashMap 底层是通过数组 + 链表或红黑 ...

  8. odoo开发教程五：高级视图

    树视图 tree视图表现出来是列表视图,列表中一行一纪录.可以根据每行纪录的某字段值不同而把每行以不同样式显示. decoration-{样式}="条件" 样式主要有: bf(fo ...

  9. StampedLock：高并发场景下一种比读写锁更快的锁

    摘要:在读多写少的环境中,有没有一种比ReadWriteLock更快的锁呢?有,那就是JDK1.8中新增的StampedLock! 本文分享自华为云社区<[高并发]高并发场景下一种比读写锁更快的 ...

  10. CHS、LAB地址

    CHS地址 CHS地址指的是柱面(Cylinder).磁头(Head).扇区(Sector)三个参数组成的地址,是用来表示磁盘上每个扇区位置的一种方式. 物理扇区号 = ((柱面号×磁头数) + 磁头 ...