vue3 使用v-for 渲染数组的数据，通过点击上一条和下一条来渲染这一条数据而隐藏其余的数据

在Vue3中，你可以使用`v-for`指令结合`:key`属性以及`ref`对象来动态渲染数组，并通过点击事件控制当前显示的数据。首先，你需要创建一个包含数组数据的响应式变量，例如：

<template>
  <div ref="listContainer">
    <ul>
      <li v-for="(item, index) in items" :key="index">
        {{ item }}
        <button @click="prevItem(index)">上一条</button>
        <button @click="nextItem(index)">下一条</button>
      </li>
    </ul>
  </div>
</template>

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

const items = ref([/* 初始化数组数据 */]);

let currentItemIndex = ref(0);

function prevItem(index) {
  if (currentItemIndex.value > 0) {
    currentItemIndex.value--;
  }
}

function nextItem(index) {
  const lastItemIndex = items.value.length - 1;
  if (index !== lastItemIndex) {
    currentItemIndex.value = (index + 1) % items.value.length; // 防止超出边界
  }
}
</script>

在这个例子中，当你点击“上一条”按钮时，会触发`prevItem`函数，如果当前索引不是第一项，就会将`currentItemIndex`减一；点击“下一条”则会切换到下一个元素。`v-if`或`v-show`可以进一步用于仅展示当前选中的`li`元素，其他元素则隐藏。