首先要安裝swiper 依賴

引入import Swiper from 'swiper'

<div class="swiper-banner">
            <div class="swiper-wrapper">
                <div class="swiper-slide" v-for="(str,index) in advertising">

                <img src="../../../dist/static/images/[email protected]" :data-src="str.imgUrl" class="swiper-lazy">
                </div>
            </div>
            <div class="swiper-pagination">
            <span v-for="(str,index) in advertising"></span>
            </div>
       </div>

1、

//懶載入--真正要顯示的圖片放在:data-src="str.imgUrl"，loading時放在src="../../../dist/static/images/[email protected]"  class定義成swiper-lazy

2、

現在開始mounted時初始化一下

var that = this
that.mySwiper = new Swiper(".swiper-banner",{
        autoplay: 4000,
        loop: that.paginationShow,
        autoplayDisableOnInteraction: false,
        preventLinksPropagation: true,
        lazyLoading : true,//懶載入開啟
        pagination: ".swiper-pagination",
        observer:true,//修改swiper自己或子元素時，自動初始化swiper
        observeParents:true,//修改swiper的父元素時，自動初始化swiper
        onSlideChangeEnd: function(swiper){ 
swiper.update() 
},

}

3、

然後在你非同步請求資料完成後

that.$nextTick(function() {
that.mySwiper.startAutoplay()//重新開始輪播
that.mySwiper.reLoop()//重新計算slides個數
})

參考：http://www.cnblogs.com/DivHao/p/6866399.html

http://www.swiper.com.cn/api/Images/2015/0308/213.html