vue-awesome-swiper页面渲染轮播无效的问题

vue-awesome-swiper的问题使用vue-cli搭建的项目，在图片轮播部分采用了vue-awesome-swiper插件，没有数据时有轮播效果，接入数据渲染时，轮播无效。在网上查找一番之后，解决方法是，在最外面的swiper标签，添加v-if判断：v-if=“swiperSlides.length > 1” 则可以正常滚动。代码如下：<template> <swiper :options=“swiperOption” class=“hot_swiper” v-if=“swiperSlides.length > 1” > <swiper-slide v-for="(slide,index) in swiperSlides" :key=“index”> <img :src=“slide” alt=“pictrue”> </swiper-slide> </swiper></template>这里涉及到vue-awesome-swiper的使用，简单介绍一下，也方便自己以后查阅。vue-awesome-swiper的安装npm i vue-awesome-swiper -S // swiper专门针对vue出的全局引入import VueAwesomeSwiper from ‘vue-awesome-swiper’;import ‘swiper/dist/css/swiper.css’Vue.use(VueAwesomeSwiper);在组件中使用① template部分：<template> <swiper :options=“swiperOption” class=“hot_swiper” v-if=“swiperSlides.length > 1” > <swiper-slide v-for="(slide,index) in swiperSlides" :key=“index”> <img :src=“slide” alt=“pictrue”> </swiper-slide> </swiper></template>② script部分import { swiper, swiperSlide } from ‘vue-awesome-swiper’;export default { name: ‘hot’, data() { return { swiperOption: { // swiper4的写法哟！ autoplay: { // 自动轮播 delay: 3000, disableOnInteraction: false }, slidesPerView: 5, // 一次轮播放几张图 spaceBetween: 30, // 每一张图间隔的距离 loop: true // 无限轮播 }, swiperSlides: [] } }}对于 vue-awesome-swiper 的使用暂时只有这么多，后面有进一步研究再来补充。冲鸭~而图片轮播也可应用一些UI组件，例如Element-UI（PC端）的Carousel 走马灯，像是我最近着手的项目的banner轮播图，就用了ELement-UI的Carousel、Mint-UI（移动端）的Swiper等等……看项目的需要。