vue3中使用swiper组件怎么绑定当前swiper-slide的下标

在 Vue3 中使用 Swiper 组件，可以通过监听 Swiper 实例的 slideChange 事件，获取当前 slide 的下标。

首先，需要安装 Swiper 组件：

npm install swiper

然后在组件中引入 Swiper 组件：

import { Swiper, SwiperSlide } from 'swiper/vue';
import 'swiper/swiper-bundle.css';

接着，在模板中使用 Swiper 和 SwiperSlide 组件：

<template>
  <Swiper @slideChange="onSlideChange">
    <SwiperSlide v-for="(item, index) in items" :key="index">
      {{ item }}
    </SwiperSlide>
  </Swiper>
</template>

在组件的 data 中定义一个变量 currentIndex，用于存储当前 slide 的下标：

export default {
  data() {
    return {
      currentIndex: 0,
      items: ['slide1', 'slide2', 'slide3']
    };
  },
  methods: {
    onSlideChange(swiper) {
      this.currentIndex = swiper.activeIndex;
    }
  }
};

在 onSlideChange 方法中，通过 swiper.activeIndex 获取当前 slide 的下标，并将其保存到 currentIndex 变量中。

这样，在模板中就可以使用 currentIndex 变量来显示当前 slide 的下标了：

<template>
  <div>
    <Swiper :initialSlide="currentIndex" @slideChange="onSlideChange">
      <SwiperSlide v-for="(item, index) in items" :key="index">
        {{ item }}
      </SwiperSlide>
    </Swiper>
    <p>当前 slide 的下标：{{ currentIndex }}</p>
  </div>
</template>