Vue實(shí)現(xiàn)簡單圖片切換效果
本文實(shí)例為大家分享了Vue實(shí)現(xiàn)簡單圖片切換的具體代碼，供大家參考，具體內(nèi)容如下
代碼：
<!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='http://www.cgvv.com.cn/bcjs/imgArr[index]'/> <!-- 左箭頭 --> <a href='javascript:void(0)' @click='prev' v-show='index!=0'>《</a> <!-- 右箭頭 --> <a href='javascript:void(0)' @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>
總結(jié)：
列表數(shù)據(jù)使用數(shù)組保存； v-bind指令可以設(shè)置元素屬性，如src ； v-show和v-if都可以切換元素的顯示狀態(tài)，但頻繁切換推薦使用v-show以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章：
1. 推薦一個(gè)好看Table表格的css樣式代碼詳解2. 基于Surprise協(xié)同過濾實(shí)現(xiàn)短視頻推薦方法示例3. 不使用XMLHttpRequest對象實(shí)現(xiàn)Ajax效果的方法小結(jié)4. vue-electron中修改表格內(nèi)容并修改樣式5. 微信小程序?qū)崿F(xiàn)商品分類頁過程結(jié)束6. 以PHP代碼為實(shí)例詳解RabbitMQ消息隊(duì)列中間件的6種模式7. ASP新手必備的基礎(chǔ)知識8. AJAX實(shí)現(xiàn)文件上傳功能報(bào)錯(cuò)Current request is not a multipart request詳解9. PHP獲取時(shí)間戳等相關(guān)函數(shù)匯總10. ASP常用日期格式化函數(shù) FormatDate()
網(wǎng)公網(wǎng)安備