Vue輪播圖
阿新 • • 發佈：2021-10-01
好久沒有看vue了，做個輪播圖的筆記，生命週期的函式需要用到ajax
博觀而約取，厚積而薄發。<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="vue/vue.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.slim.min.js"></script> </head> <body> <div id='app'> <img :src="images[currentIndex].imgSrc" alt="" height="800" width="600" @click = 'imgHandler'> <br> <button @click = 'preHandler'>pre</button> <button @click = 'nextHandler'>next</button> </div> <script> let vm = new Vue({ el:'#app', data(){ return{ images: [ {id :1,imgSrc :'./img/001.jpg'}, {id :2,imgSrc :'./img/002.jpg'}, {id :3,imgSrc :'./img/003.jpg'}, {id :4,imgSrc :'./img/004.jpg'}, ], currentIndex:0 } }, methods:{ preHandler(){ this.currentIndex --; if (this.currentIndex == -1){ this.currentIndex =3 } }, nextHandler(){ this.currentIndex ++; if (this.currentIndex == 4){ this.currentIndex =0; } }, imgHandler(e){ console.log(e.target); console.log(this) } } , //元件建立完成，ajax created(){ setInterval(() => { this.currentIndex ++; if (this.currentIndex == 4){ this.currentIndex =0; } }, 1000); // let _this = this // setInterval(function(){ // console.log(_this); // }, 1000); } }) </script> </body> </html>