<template>
  <div class="banner">
    <swiper :options="swiperOption" v-if="showSwiper">
      <!-- slides -->
      <swiper-slide v-for="item of list" :key="item.id">
        <img class="banner-img" :src="item.imgUrl">
      </swiper-slide>
      <!-- Optional controls -->
      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
  </div>
</template>
 

<script>
  export default {
    name: "Banner",
    props: {
      list: Array
    },
    data() {
      return {
        swiperOption1: {
          pagination: {
            el: '.swiper-pagination'
          },
          observer: true,
          autoplay: true,
          loop: true
        },
        swiperOption2: {
          pagination: {
            el: '.swiper-pagination'
          },
          observer: true,
          autoplay: true,
          loop: false
        }
      }
    },
    computed: {
      swiperOption(){
        var len = this.list.length
        console.log('swiperOption list size:',len)
        if(len == 1){
          return this.swiperOption2
        }else{
          return this.swiperOption1
        }
      },
      showSwiper() {
        var len = this.list.length
        console.log('list size:',len)
        return len
      }
    }
  }
</script>
 

處理過程是這樣的，新增一個計算屬性，在data中定義兩種配置，一種是多張圖片的swiper配置，一張是單張圖片的swiper配置