vue3组合式写法模板循环数组拿到上一个数组中的值

在Vue3中，你可以使用组合式API来编写组件，同时也可以使用 `v-for`指令来循环数组。如果你想获取上一个数组中的值，可以使用 `computed`计算属性和 `watch` 监听器来实现。

下面是一个示例代码，假设你有一个数组 `items`，你想在循环中获取上一个元素的值：

<template>
  <div>
    <div v-for="(item, index) in items" :key="index">
      上一个元素值：{{ prevItem }}
      当前元素值：{{ item }}
    </div>
  </div>
</template>

<script>
import { ref, computed, watch } from 'vue';

export default {
  setup() {
    const items = ref([1, 2, 3, 4, 5]);
    const currentIndex = ref(0);
    const prevItem = computed(() => {
      if (currentIndex.value === 0) return null; // 如果是第一个元素，返回null
      return items.value[currentIndex.value - 1]; // 返回上一个元素的值
    });

    watch(currentIndex, (index) => {
      console.log('当前索引值', index);
    });

    return {
      items,
      currentIndex,
      prevItem,
    };
  },
};
</script>

在上面的代码中，我们使用 `ref` 创建了一个响应式变量 `currentIndex`，表示当前循环的索引值。然后我们使用 `computed` 计算属性 `prevItem` 来获取上一个元素的值。在 `prevItem` 中，我们使用 `currentIndex.value` 来获取当前索引值，并根据它来计算上一个元素的值。

最后，我们使用 `watch` 监听器来监控 `currentIndex` 的变化，以便我们在控制台上输出当前索引值。

在模板中，我们使用 `v-for` 循环数组 `items`，并在循环中使用 `prevItem` 来获取上一个元素的值，并将它与当前元素的值一起显示出来。