vue3 点击下一张改变图片和编号

在 Vue 3 中，实现点击按钮切换图片和编号的功能通常会涉及到组件的状态管理和事件处理。以下是一个简单的示例来说明如何做到这一点：

1. 首先，你需要在组件的 data 函数中定义图片数组和当前显示图片的索引。

2. 在模板中，你可以使用 v-for 指令来渲染图片数组，同时使用 v-bind 指令将图片的 src 属性绑定到对应的图片地址上，并且显示当前图片的编号。

3. 在按钮上绑定点击事件，并在事件处理函数中更新当前图片的索引，同时确保索引值不会超出数组的范围。

下面是一个具体的代码示例：

<template>
  <div>
    <img :src="currentImage" alt="Image">
    <p>当前图片编号：{{ currentImageIndex + 1 }}</p>
    <button @click="previousImage">上一张</button>
    <button @click="nextImage">下一张</button>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const images = ref([
  'image1.jpg',
  'image2.jpg',
  'image3.jpg',
  // ...更多图片
]);

const currentImageIndex = ref(0);
const currentImage = ref(images.value[0]);

function nextImage() {
  currentImageIndex.value = (currentImageIndex.value + 1) % images.value.length;
  currentImage.value = images.value[currentImageIndex.value];
}

function previousImage() {
  currentImageIndex.value = (currentImageIndex.value - 1 + images.value.length) % images.value.length;
  currentImage.value = images.value[currentImageIndex.value];
}
</script>

在这个示例中，我们使用了 Vue 3 的 Composition API，包括 `ref` 和 `@click` 事件监听器。`currentImageIndex` 用于跟踪当前图片的索引，而 `currentImage` 用于存储当前显示的图片地址。点击 "下一张" 按钮时，`nextImage` 函数会更新索引和图片地址，而点击 "上一张" 按钮时，`previousImage` 函数会相应地调整索引并更新图片。