Vue.js實現圖片切換功能
阿新 • • 發佈：2021-06-27
本文例項為大家分享了vue.js實現圖片切換功能的具體程式碼，供大家參考，具體內容如下
實現功能如下
檔案目錄如下，要實現本功能只需要修改圖片的儲存位置即可
程式碼如下
<!DOCTYPE html> <html>http://www.cppcns.com; <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" @clhttp://www.cppcns.comick="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)程式設計客棧 },nYBkuDlextphoto:function(){ this.index++; if(this.index===this.imgSrc.length){ this.index=0; } console.log(this.index) } } }) </script> </body> </html>
適合初學者。
以上就是本文的全部內容，希望對大家的學習有所幫助，也http://www.cppcns.com希望大家多多支援我們。