<!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. This application failed to start because it could not find or load the Qt platforms plugins

     由于一直在linux下操作,今天Qt移植平台的时候导致.exe可执行文件一直运行不起来,提示缺少某些dll库,这个问题解决起来简单(直接去qt源码里面查找对应库添加到可执行文件目录就行),但是之后一 ...

  2. vue 项目全局修改element-ui的样式/主题颜色

    一,安装sass 1 npm i sass sass-loader --save 二,安装element主题生成工具 // 全局安装npm i element-theme --save // 安装主体 ...

  3. 深度学习-05(tensorflow模型保存与加载、文件读取、图像分类：手写体识别、服饰识别)

    文章目录 深度学习-05 模型保存于加载 什么是模型保存与加载 模型保存于加载API 案例1:模型保存/加载 读取数据 文件读取机制 文件读取API 案例2:CSV文件读取 图片文件读取API 案例3 ...

  4. 2022-11-18：给定一个数组arr，表示连续n天的股价，数组下标表示第几天 指标X：任意两天的股价之和 - 此两天间隔的天数 比如 第3天，价格是10 第9天，价格是30 那么第3天和第9天的指

    2022-11-18:给定一个数组arr,表示连续n天的股价,数组下标表示第几天 指标X:任意两天的股价之和 - 此两天间隔的天数 比如 第3天,价格是10 第9天,价格是30 那么第3天和第9天的指 ...

  5. 2021-05-17：数组中所有数都异或起来的结果，叫做异或和。给定一个数组arr，可以任意切分成若干个不相交的子数组。其中一定存在一种最优方案，使得切出异或和为0的子数组最多。返回这个最多数量。

    2021-05-17:数组中所有数都异或起来的结果,叫做异或和.给定一个数组arr,可以任意切分成若干个不相交的子数组.其中一定存在一种最优方案,使得切出异或和为0的子数组最多.返回这个最多数量. 福 ...

  6. 2021-10-18：乘积最大子数组。给你一个整数数组 nums ，请你找出数组中乘积最大的连续子数组（该子数组中至少包含一个数字），并返回该子数组所对应的乘积。力扣152。

    2021-10-18:乘积最大子数组.给你一个整数数组 nums ,请你找出数组中乘积最大的连续子数组(该子数组中至少包含一个数字),并返回该子数组所对应的乘积.力扣152. 福大大 答案2021-1 ...

  7. 小H分糖果

    7-5 小H分糖果 (20 分) 小H来到一个小学分糖果,小学生们很听话,站成一排等着分糖果,小H将根据每个人的上次考试分数给一定的糖果,规则如下. 每个人都有自己分数ai​,代表上次考试成绩. 每个 ...

  8. c#优雅高效的读取字节数组——不安全代码(1)

    在开发上位机的经历中,会有很多需要和下位机交互通信的场景,大多数都会定义一个和硬件的通信协议,最终在上位机代码中的形式其实就是符合通信协议的字节数组. 目录 场景 如何解析字节数组到类或结构体中 建立 ...

  9. mybatis-plus-generator-ui 可视化代码生成器！

    它提供交互式的Web UI用于生成兼容mybatis-plus框架的相关功能代码,包括Entity,Mapper,Mapper.xml,Service,Controller等. 可以自定义模板以及各类 ...

  10. Android strings.xml按照key修改

    strings.xml匹配替换 将两个Android项目中的多语言字符串文件(strings.xml)进行比较,如果其中一个项目中包含另一个项目没有的字符,则合并到单一的输出文件,并以 key 在原始 ...