Vue轮播图

好久没有看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>
posted @ 2021-10-01 19:15  shmily墨鱼  阅读(63)  评论(0)  编辑  收藏  举报