vue3 定义数组

作者：╭ァ你不懂的悲殇发布日期:2026-04-16 浏览:40

// 在 Vue 3 中定义数组的方式

<template>
  <div>
    <!-- 使用 v-for 指令遍历数组 -->
    <ul>
      <li v-for="(item, index) in items" :key="index">{{ item }}</li>
    </ul>
  </div>
</template>

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

export default {
  setup() {
    // 定义一个响应式的数组
    const items = ref(['Apple', 'Banana', 'Orange']);

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

<!-- 解释说明:
1. 使用 `ref` 函数来定义一个响应式的数组 `items`。
2. 在模板中使用 `v-for` 指令来遍历数组并渲染列表项。
3. `:key` 是为了给每个列表项提供一个唯一的标识符，通常使用索引或唯一 ID。 -->

上一篇：vue3 eslint

下一篇：vue图表