v-for

v-for 指令用于基于数组、对象或指定次数渲染 HTML 元素、元素块，甚至组件。使用此指令时，重要的是为每个项目分配一个唯一的键，以避免问题并提高性能。此指令遵循 item in items 语法。

示例

<script setup>
  import { ref } from 'vue';
  const foods = ref([
    {id: 1, name: "apple"},
    {id: 2, name: "pear"},
    {id: 3, name: "pizza"}
  ]);
</script>

<template>
  <p v-for="food in foods" :key="food.id">{{ food.name }}</p>
</template>