swiper在vue项目中的使用频率是非常高的，那么swiper在vue项目中改如何使用呢？

1.安装(建议下载5版本的)

npm install --save swiper@5

2.在项目的入口文件中引入(main.js)

import Swiper from 'swiper'
import 'swiper/css/swiper.css'  //样式也需要引入

3.实例化swiper

  var mySwiper = new Swiper('.swiper-container', {
            loop: true,
            autoplay: 500,
           
          });

重点！！！ 重点！！！ 重点！！！ 重点！！！

我们通常都会在mounted中实例化swiper,但是这样写完后发现swiper并没有生效，因为我们swipe的数据也是在mounted中的，swiper如果也放在Mounted中，这是数据还没有加载完毕(因为请求数据是异步的)，所以swiper动画并不生效，这时我们应该如下操作：

 watch: {
    bannerList: {
      handler (newval, oldval) {
        this.$nextTick(() => {
          var mySwiper = new Swiper('.swiper-container', {
            loop: true,
            autoplay: 500,
            // 如果需要分页器
            pagination: {
              el: '.swiper-pagination',
            },

            // 如果需要前进后退按钮
            navigation: {
              nextEl: '.swiper-button-next',
              prevEl: '.swiper-button-prev',
            },
          });
        })
      }
    }
  }

我们应该首先监听渲染轮播图的数据是否加载完毕，那为什么还要使用this.$nextTick()? 因为我们使用v-for渲染数据的时候也需要时间，

而 将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。

所以使用 this.$nextTick() 等数据循环完毕再加动画