<template> <div class="swiper-size"> <swiper :options="swiperOption"> <swiper-slide v-for="(slide, index) in bannerImg" :key="index"> <img class="swiperimg" :src="slide" alt="" /> </swiper-slide> <div class="swiper-pagination" slot="pagination"></div> </swiper> </div> </template> <script> export default { data() { return { swiperOption:{ }, bannerImg: [ require("../../../assets/slideShow/j1.jpg"), require("../../../assets/slideShow/j2.jpg"), require("../../../assets/slideShow/j3.jpg"), require("../../../assets/slideShow/j4.jpg"), ], }; }, } </script>在这段代码下为什么会显示出所有的图片

这段代码会显示出所有的图片，是因为 `swiperOption` 中默认的配置是开启了循环轮播和自动播放的。因此，在轮播图初始化时，会按照 `bannerImg` 数组中的顺序依次显示所有的图片，然后再从头开始循环播放。

要实现只显示一张图片，可以在 `swiperOption` 中将 `loop` 和 `autoplay` 属性设置为 `false`，具体代码如下：

<template>
  <div class="swiper-size">
    <swiper :options="swiperOption">
      <swiper-slide v-for="(slide, index) in bannerImg" :key="index">
        <img class="swiperimg" :src="slide" alt="" />
      </swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
  </div>
</template>

<script>
export default {
  data() {
    return {
      swiperOption: {
        loop: false, // 不循环
        autoplay: false // 不自动播放
      },
      bannerImg: [
        require("../../../assets/slideShow/j1.jpg")
      ],
    };
  },
}
</script>

这样就只会显示 `bannerImg` 数组中的第一张图片了。