vue3中v-for举例说明

在 Vue 3 中，v-for 指令用于在列表或数组上循环渲染元素。以下是一个简单的例子，演示如何在 Vue 3 中使用 v-for：

<template>
  <div>
    <ul>
      <li v-for="(item, index) in items" :key="index">
        {{ index + 1 }}. {{ item.name }} - {{ item.value }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { name: 'Item 1', value: 10 },
        { name: 'Item 2', value: 20 },
        { name: 'Item 3', value: 30 }
      ]
    };
  }
};
</script>

说明：

• v-for="(item, index) in items"：v-for 循环 items 数组，并将当前项赋值给 item，当前索引赋值给 index。
• :key="index"：为每个列表项设置唯一的 key，在这里使用 index 作为 key，实际使用中通常建议使用唯一的标识符（如 item.id）。
• {{ index + 1 }}：显示当前项的索引，从 1 开始。

这个示例会渲染一个列表，其中每一项显示 name 和 value。