vue foreach循环遍历数组

作者：昨夜的风发布日期:2025-04-24 浏览:43

// 使用 Vue.js 的 v-for 指令遍历数组

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

<script>
export default {
  data() {
    return {
      // 定义一个数组 items，包含多个字符串元素
      items: ['苹果', '香蕉', '橙子', '葡萄']
    };
  }
};
</script>

<!-- 解释说明：
1. `v-for` 是 Vue.js 中用于循环遍历数组的指令。
2. `v-for="(item, index) in items"` 表示遍历 `items` 数组中的每个元素，并将当前元素赋值给 `item`，同时获取当前元素的索引值 `index`。
3. `:key="index"` 是为了给每个生成的元素提供一个唯一的标识符，确保 Vue 可以高效地更新 DOM。
4. `{{ item }}` 是插值表达式，用于在模板中显示当前遍历到的数组元素。 -->

上一篇：vue路由配置

下一篇：vue播放视频