Vue实现首页banner自动轮播效果

本文实例为大家分享了Vue实现首页banner自动轮播的具体代码，供大家参考，具体内容如下

效果如图：

 ①创建Banner.vue组件，需传入banner数组，可设置轮播间隔ms

②在要使用的页面引入

import Banner from '@/components/Banner'
components: {
    Banner
}
data () {
    return {
      bannerData: [
        {
          link: '跳转地址...',
          src: '图片地址...'
        },
        {
          link: '跳转地址...',
          src: '图片地址...'
        },
        {
          link: '跳转地址...',
          src: '图片地址...'
        }
      ]
    }
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。