本文实例为大家分享了Vue.js实现图片切换功能的具体代码,供大家参考,具体内容如下
实现功能如下
文件目录如下,要实现本功能只需要修改图片的存储位置即可
代码如下
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="js/vue.js" type="text/javascript" charset="utf-8"></script> </head> <style type="text/css"> div { margin: 0 auto; width:200px; height: 300px; border: 1px solid aqua; } img { margin: 0 auto; width: 200px; height: 250px; border: 1px solid aqua; } </style> <body> <div id="app"> <img :src="imgSrc[index]" > <button type="button" @click="prephoto()">上一张</button> <button type="button" @click="nextphoto()">下一张</button> </div> <script type="text/javascript"> var app = new Vue({ el:"#app", data:{ imgSrc:["./img/1.jpg","./img/2.jpg"], index:1 }, methods:{ prephoto:function(){ this.index--; if(this.index===-1) { this.index=this.imgSrc.length-1; } console.log(this.index) }, nextphoto:function(){ this.index++; if(this.index===this.imgSrc.length){ this.index=0; } console.log(this.index) } } }) </script> </body> </html>
适合初学者。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持华域联盟。
您可能感兴趣的文章:
- vue实现图片切换效果
- vue+js点击箭头实现图片切换
- vue卡片式点击切换图片组件使用详解
- Vue实现简单图片切换效果
- vue实现按钮切换图片
- vue使用swiper实现左右滑动切换图片
- Vue实现base64编码图片间的切换功能
- vue自定义js图片碎片轮播图切换效果的实现代码
本文由 华域联盟 原创撰写:华域联盟 » Vue.js实现图片切换功能
转载请保留出处和原文链接:https://www.cnhackhy.com/72918.htm