vue 使用swiper

1、引入

    import Swiper from 'swiper' 

    @import '../../common/css/swiper.css';

2、布局

    <div class="swiper-container">
          <div class="swiper-wrapper">
            <div v-for='(i,index) in arrItem' :key='index' class="swiper-slide">
              <div class="iSlide">
                  <img class="img" :src="i.imgUrl">
                </div>
            </div>
          </div>
        </div>

3、实例化

      export default{  
          mounted:function(){
            var mySwiper = new Swiper('.swiper-container', {

            })
          },
          data(){
            return {
                arrItem:[
                    {
                        name:'swiperSlide5',
                        imgUrl:'http://pic.58pic.com/58pic/13/60/16/64b58PICXEK_1024.jpg'
                    },
                    {
                        name:'swiperSlide1',
                        imgUrl:'http://image.qmango.com/hotelimg/dl1210/109490/109.jpeg'
                    },
                    {
                        name:'swiperSlide51',
                        imgUrl:'http://image.qmango.com/hotelimg/dl1210/125708/181.jpeg'
                    },
                    {
                        name:'swiperSlide1111115',
                        imgUrl:'http://image.qmango.com/hotelimg/dl1210/119297/793.jpeg'
                    }
                ]
            }
          }
         }