vue3 使用v-for 渲染数组的数据，通过点击上一条和下一条来一条一条的渲染

Vue3 中使用 `v-for` 渲染数组数据时，通常配合 `:key` 和 `ref` 或者 `计算属性` 来实现在列表中动态添加或删除元素。当你想要通过点击按钮切换显示上一条或下一条数据时，可以这样做：

1. 首先，在组件里创建一个状态变量（通常是数组），例如 `items`，并初始化一个初始值。

<script>
export default {
  data() {
    return {
      items: [initialData], // 初始数据数组
      currentIndex: 0, // 当前索引
    };
  },
};
</script>

2. 使用 `v-for` 显示列表项，并绑定当前索引来导航：

<template>
  <ul>
    <li v-for="(item, index) in items" :key="index">
      {{ item }}
      <!-- 添加上一条、下一条按钮 -->
      <button @click="prevItem(index)">上一条</button>
      <button @click="nextItem(index)">下一条</button>
    </li>
  </ul>
</template>

<script>
//...
methods: {
  prevItem(index) {
    if (index > 0) {
      this.currentIndex = index - 1;
    }
  },
  nextItem(index) {
    const length = this.items.length;
    if (index < length - 1) {
      this.currentIndex = index + 1;
    } else if (length > 1) { // 如果不是最后一个元素，防止越界
      this.currentIndex = 0;
    }
  },
},
</script>

在这个例子中，`prevItem` 函数会将 `currentIndex` 减一，显示上一条数据；`nextItem` 函数会加一，显示下一条。如果到了数组的边缘，需要处理边界情况以避免错误地显示元素。