<!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. ts中抽象类、继承、多态

    ts中类抽象类.多态: 抽象类: abstract 修饰, 里面可以没有抽象方法.但有抽象方法(abstract method)的类必须声明为抽象类(abstract class) 多态:父类定义一个 ...

  2. 记一次某CMS代码审计（转载）

    作者:ddwGeGe 本文转自先知社区:https://xz.aliyun.com/t/11774 前言 无意中浏览到某小众OA官网且可以下载到源码,随机审计一波,最后成功Getshell,大佬勿喷 ...

  3. 【易车网实例】x-sign逆向保姆级教程

    易车号x-sign逆向 前言 许多网站都有反爬机制,x-sign加密就是许多反爬虫机制的其中一种,本次将以易车号作为目标进行演示. 方法仅供学习参考. 链接:https://hao.yiche.com ...

  4. PHP获取网页返回的JSON数据并在微信换行展示

    1 $url ="http://japi.juhe.cn/joke/content/text.from?page=&pagesize=&key=c968d04ab0ea15e ...

  5. 2022-03-14：一开始屏幕上什么也没有，粘贴板里什么也没有， 你只能在键盘上做如下4种操作中的1种： 输入：在屏幕上已经显示内容的后面加一个A， 全选：把屏幕上已经显示的全部内容选中， 复制：被

    2022-03-14:一开始屏幕上什么也没有,粘贴板里什么也没有, 你只能在键盘上做如下4种操作中的1种: 输入:在屏幕上已经显示内容的后面加一个A, 全选:把屏幕上已经显示的全部内容选中, 复制:被 ...

  6. 2022-01-12：给定一个正数数组arr，长度为n，下标0~n-1， arr中的0、n-1位置不需要达标，它们分别是最左、最右的位置， 中间位置i需要达标，达标的条件是 : arr[i-1] ＞

    2022-01-12:给定一个正数数组arr,长度为n,下标0~n-1, arr中的0.n-1位置不需要达标,它们分别是最左.最右的位置, 中间位置i需要达标,达标的条件是 : arr[i-1] &g ...

  7. 基于Gazebo搭建移动机器人，并结合SLAM系统完成定位和建图仿真

    博客地址:https://www.cnblogs.com/zylyehuo/ gazebo小车模型创建及仿真详见之前博客 gazebo小车模型(附带仿真环境) - zylyehuo - 博客园 gaz ...

  8. 沁恒 CH32V208(五): CH32V208 运行FreeRTOS示例的说明

    目录 沁恒 CH32V208(一): CH32V208WBU6 评估板上手报告和Win10环境配置 沁恒 CH32V208(二): CH32V208的储存结构, 启动模式和时钟 沁恒 CH32V208 ...

  9. linux DHCP

    目录 一.DHCP概念 二.DHCP工作过程 三.DHCP实验 一.DHCP概念 概念:动态主机配置协议,自动为计算机分配tcp/ip参数 DHCP的优点:1.减少管理员的工作难度 2.避免错误的可能 ...

  10. odoo部署安全性问题

    本文档描述在生产中或在面向Internet的服务器上设置Odoo的基本步骤.它是在安装之后进行的,对于没有在internet上公开的开发系统来说,它通常不是必需的.警告如果您正在设置公共服务器,请务必 ...