vue遍历数组

作者：任光阴风干ゝ影象发布日期:2025-11-10 浏览:95

// 使用 v-for 指令遍历数组

<template>
  <ul>
    <!-- v-for 指令用于遍历数组中的每个元素 -->
    <li v-for="(item, index) in items" :key="index">
      {{ index }}: {{ item }}
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      // 定义一个数组
      items: ['苹果', '香蕉', '橙子', '葡萄']
    };
  }
};
</script>

<!-- 解释说明:
1. `v-for` 是 Vue.js 中用于遍历数组或对象的指令。
2. `(item, index) in items` 表示遍历 `items` 数组，`item` 是当前元素，`index` 是当前元素的索引。
3. `:key="index"` 是为了给每个列表项提供一个唯一的标识符，提升渲染性能和避免潜在问题。
4. `{{ index }}: {{ item }}` 用于在模板中显示当前元素及其索引。
-->

上一篇：vue组件生命周期

下一篇：vue aes加密