vue动态渲染swiper问题

使用vue控制是否显示swiper的某个slide，出现swiper不显示，以及pagination联动失效等问题。

	<div id="mySwiperPagination" class="swiper-pagination"></div>
	<div id="mySwiper" class="swiper-container" style="width: 100%; height: 200px;">
		<div class="swiper-wrapper">
			<div v-if="isShow" class="swiper-slide">
			</div>
			<div class="swiper-slide">
			</div>
		</div>
	</div>

需要注意两点，一个是改变isShow的值后不要立刻初始化swiper，此时vue还未刷新页面。使用this.$nextTick()来初始化。
二是如果之前已经初始化过swiper了，则调用destroy销毁原swiper。

//在更新完dom后初始化swiper
this.$nextTick(function () {
	if (_this.mySwiper) {
		_this.mySwiper.destroy();
    }
    _this.mySwiper = new Swiper('#mySwiper', {
    	pagination: {
    		el: '#mySwiperPagination',
    		clickable: true,
    		renderBullet: function (index, className) {
    			if (index == 0 && _this.isShow) {
    				return '<span class="' + className + '">tab1</span>';
    			} else {
    				return '<span class="' + className + '">tab2</span>';
    			}
    		},
    	}
    });
});

3月19日更新

swiper初始化后，数据变化了可以调用update更新，还可以改变一些option属性。

this.$nextTick(() => {
     if (this.swiper) {
         this.swiper.params.slidesPerView = this.num;
         this.swiper.update();
     } else {
         this.swiper= new Swiper('#my_swiper', {
             autoplay: {
                 delay: 2000
             },
         slidesPerView: this.num,
         spaceBetween: 0,
      });
   }
});