vue3定义数组

// 在 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() {
    // 使用 ref 定义一个响应式的数组
    const items = ref(['苹果', '香蕉', '橙子']);

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

<style scoped>
/* 这里可以添加一些样式 */
</style>

解释说明：

1. 模板部分 (<template>):

   • 使用 v-for 指令遍历 items 数组，并为每个元素生成一个 <li> 标签。
   • :key="index" 是为了给每个列表项提供一个唯一的标识符，以提高性能和避免潜在的渲染问题。

2. 脚本部分 (<script>):

   • 使用 ref 函数定义了一个响应式的数组 items，初始值为包含三个水果名称的数组。
   • setup 函数是 Vue 3 组合式 API 的入口，返回的对象中的属性可以直接在模板中使用。

3. 样式部分 (<style scoped>):

   • 可以在这里添加组件的样式，scoped 属性确保这些样式只应用于当前组件。