vue3遍历数组

作者：偶然＼寥寂り发布日期:2025-05-04 浏览:69

<template>
  <ul>
    <li v-for="(item, index) in items" :key="index">
      {{ item }}
    </li>
  </ul>
</template>

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

export default {
  setup() {
    // 定义一个数组，用于遍历
    const items = ref(['苹果', '香蕉', '橙子', '葡萄']);

    return {
      items
    };
  }
};
</script>

解释说明：

v-for 指令：用于在 Vue 中遍历数组。它会根据数组的长度重复渲染元素。
(item, index)：item 是当前遍历到的数组元素，index 是该元素的索引。
:key="index"：为每个列表项提供一个唯一的 key 属性，有助于 Vue 更高效地更新 DOM。
ref：用于定义响应式数据。items 是一个包含水果名称的数组。
setup 函数：Vue 3 的组合式 API 中用于替代选项式 API（如 data、methods 等）的地方，在这里我们定义了组件的状态和逻辑。

上一篇：vue find函数

下一篇：vue includes用法