<!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. IE盒模型和标准盒模型之间的差别

    1.W3C标准盒子模型 w3c盒子模型的范围包括margin.border.padding.content,并且content部分不包含其他部分 2.IE盒子模型 IE盒子模型的范围包括margin. ...

  2. Prism Sample 24-NavigationJournal

    本例是在上一案例中导航参数的基础上增加了导航的历史记录功能,就是向前向后的功能. 导航本身很简单,以下代码就实现了: public void OnNavigatedTo(NavigationConte ...

  3. SpringBoot集成Jpa对数据进行排序、分页、条件查询和过滤

    之前介绍了SpringBoot集成Jpa的简单使用,接下来介绍一下使用Jpa连接数据库对数据进行排序.分页.条件查询和过滤操作.首先创建Springboot工程并已经继承JPA依赖,如果不知道可以查看 ...

  4. 音视频八股文（7）-- 音频aac adts

    AAC介绍 AAC(Advanced Audio Coding)是一种现代的音频编码技术,用于数字音频的传输和存储领域.AAC是MPEG-2和MPEG-4标准中的一部分,可提供更高质量的音频数据,并且 ...

  5. 2022-11-22：小美将要期中考试，有n道题，对于第i道题， 小美有pi的几率做对，获得ai的分值，还有(1-pi)的概率做错，得0分。 小美总分是每道题获得的分数。 小美不甘于此，决定突击复习，

    2022-11-22:小美将要期中考试,有n道题,对于第i道题, 小美有pi的几率做对,获得ai的分值,还有(1-pi)的概率做错,得0分. 小美总分是每道题获得的分数. 小美不甘于此,决定突击复习, ...

  6. 2021-01-30：redis中，Pipeline有什么好处？

    福哥答案2021-01-30:可以将多次 IO 往返的时间缩减为一次,减少多次IO延迟的开销.前提是 pipeline 执行的指令之间没有因果相关性. 多个指令之间没有依赖关系,可以使用 pipeli ...

  7. 报错HTTP 405 Method Not Allowed， Allow: POST, OPTIONS， "detail": "方法 “GET” 不被允许。"

    当测试注册功能是否实现时,出现了这种情况的405:HTTP 405 Method Not AllowedAllow: POST, OPTIONSContent-Type: application/js ...

  8. Redis数据结构三之压缩列表

    本文首发于公众号:Hunter后端 原文链接:Redis数据结构三之压缩列表 本篇笔记介绍压缩列表. 在 Redis 3.2 版本之前,压缩列表是列表对象.哈希对象.有序集合对象的的底层实现之一. 因 ...

  9. SqliLabs 第六关 报错注入！！！

    点开网址,首先看到一个页面,首先尝试闭合字符 id=1 报错 id=1' 报错 id=1"成功 然后开始爆字段?id=1" order by 3 --+ 发现有三个字段然后查询显示 ...

  10. ChatGPT 推出 iOS 应用，支持语音输入，使用体验如何？

    最近,OpenAI 宣布推出官方 iOS 应用,允许用户随时随地访问其高人气 AI 聊天机器人,此举也打破了近几个月内苹果 App Store 上充斥似是而非的山寨服务的窘境. 该应用程序是 Chat ...