<template>  <div class="swiper-container">    <div class="swiper-wrapper">      <div class="swiper-slide" v-for="item in swiper"><img :src="item.room_src" alt=""></div>      <!--<div class="swiper-slide" v-for="item in test"><img :src="item.room_src" alt=""></div>-->    </div>  </div></template><script> import Swiper from 'swiper' export default {  name: 'swiper',  data() {   return {    mySwiper: null,//    test: [//     "https://rpic.douyucdn.cn/acrpic/171024/288016_0921.jpg",//     "https://rpic.douyucdn.cn/acrpic/171024/748396_0924.jpg",//     "https://rpic.douyucdn.cn/acrpic/171024/453751_0922.jpg",//     "https://rpic.douyucdn.cn/acrpic/171024/79663_0920.jpg"http://    ]   }  },  props: ['swiper'], //swiper的就是test這個數據傳遞來的  methods: {   _initSwiper() {    this.mySwiper = new Swiper('.swiper-container', {     autoplay: 5000,//可選選項，自動滑動    })   },   _updateSwiper() {    this.$nextTick(() => {     this.mySwiper.update(true); //swiper update的方法    })   },   swiperUpdate() {    if (this.mySwiper) { //節點存在     this._updateSwiper(); //更新    } else {     this._initSwiper(); //創建    }   },  },  watch: {   //通過props傳來的數據 和 組件一加載節點就創建成功 二者不是同步，實時監聽的swiper(傳遞的值)的變化   swiper() {    this.swiperUpdate();   }  },  mounted() {   this.swiperUpdate(); //頁面一加載拉去數據創建節點  } }</script><style lang="scss" scoped>  .swiper-container {    width: 100%;    height: 4rem;    margin-top: 0.9rem;    .swiper-wrapper {      width: 100%;      height: 100%;      .swiper-slide {        background-size: cover;        width: 100%;        height: 4rem;        img {          width: 100%;          height: 100%;        }      }    }  }</style>

//html  <swiper :swiper="roomList.slice(6,10)" ></swiper>//js import swiper from 'components/swiper/swiper' components: {   swiper  },