vue实现轮播

window.onload = function () {
    //vue实现轮播
    new Vue({
        el: '#my',//挂载元素，说白了就是在id=my的div里使用下面的vue
        data: {//所有的变量、数据都得写在data里
            num:0,
            imgs: [//用数组存放要轮播的图片
                'img/banner1.jpg',
                'img/banner2.jpg',
                'img/banner3.jpg',
                'img/banner4.jpg',
                'img/banner5.jpg'
            ]
        },
        mounted:function(){//mounted是vue实例挂载的事件钩子函数，所以它只会执行一次，之后就是play方法。
           this.play();
        },
        methods:{//vue中存放方法的地方
            autoPlay:function(){//num递增，num等于图片总数时回到第一张，其递增有下面的定时器实现
                const _self=this;
                _self.num++;
                if(_self.num == this.imgs.length){
                    _self.num=0;
                }
            },
            play:function(){//每隔一秒执行autoPlay，使得num递增
                setInterval(this.autoPlay,1000);
            }
        }
       
    });
}