之前引入组件比较成功 我们来配置一些属性

 <swiper :options="swiperOption">
    <swiper-slide class="swiper-slide" v-for="(item,index) in slide" :key="index">
          slide{{item}}
    </swiper-slide>
      <div class="swiper-pagination"  slot="pagination"></div>  //分页
      <div class="swiper-button-prev" slot="button-prev"></div> //箭头左  
      <div class="swiper-button-next" slot="button-next"></div> //箭头右  
 </swiper>

第一篇链接：https://www.jianshu.com/p/45f3b6925250

在data中通过对swiperOption的属性进行对swiper的操作

     data(){
                return {
                   slide:[1,2,3,4,5],  //定义一个小数组用来区分,
            //设置属性
            swiperOption:{
               //显示分页
                pagination: {
                    el: '.swiper-pagination',
                     clickable:true //允许分页点击跳转
                },
                //设置点击箭头
              navigation: {
                nextEl: '.swiper-button-next', //前进按钮的css选择器或HTML元素。
                prevEl: '.swiper-button-prev', //后退按钮的css选择器或HTML元素。
              },
                autoplay:{ //自动轮播
                  delay:4000 //轮播时间
                },
                //开启无限循环模式
                loop:true,
                //开启鼠标滚轮控制Swiper切换。可设置鼠标选项，或true使用默认值。
                mousewheel:true ,
               
            }
        }
                }
              }

这里的el对应这上方的div class名

上面都是常见的属性 但是swiper的属性还有很多 分享一篇文章

整理的比较好 https://segmentfault.com/a/1190000014609379