溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇內容主要講解“Vue如何實現簡單圖片切換效果”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“Vue如何實現簡單圖片切換效果”吧!
本文實例為大家分享了Vue實現簡單圖片切換的具體代碼，供大家參考，具體內容如下
代碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <title>圖片切換</title> <style type="text/css"> *{ padding: 0; margin: 0; } #app{ position: absolute; width: 100px; height: 100px; top: 100px; left: 400px; } #left{ position: relative; top:-240px; left: -45px; font-size: 50px; } #right{ position: relative; top: -300px; left: 595px; font-size: 50px; } a{ color: black; text-decoration: none; } </style> </head> <body> <div id="app"> <!-- 要輪詢的圖片 --> <img :src="imgArr[index]"/> <!-- 左箭頭 --> <a href="javascript:void(0)" id="left" @click="prev" v-show="index!=0">《</a> <!-- 右箭頭 --> <a href="javascript:void(0)" id="right" @click="next" v-show="index<imgArr.length-1">》</a> </div> <script> var app = new Vue({ el: "#app", data: { imgArr:[ "img/1.jpg", "img/2.jpg", "img/3.jpg", "img/4.jpg", "img/5.jpg", ], index: 0, }, methods: { prev: function(){ this.index--; }, next: function(){ this.index++; }, } }) </script> </body> </html>
總結：
列表數據使用數組保存；
v-bind指令可以設置元素屬性，如src ；
v-show和v-if都可以切換元素的顯示狀態，但頻繁切換推薦使用v-show
到此，相信大家對“Vue如何實現簡單圖片切換效果”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
