vue js for循环

作者：ˉ吻干迩的'泪发布日期:2025-09-03 浏览:71
// Vue.js 中的 v-for 指令用于循环渲染列表数据

// 示例代码：使用 v-for 循环渲染一个数组
<template>
  <ul>
    <!-- v-for 指令需要一个唯一的 key 属性，通常使用数组元素的索引或对象的唯一标识 -->
    <li v-for="(item, index) in items" :key="index">
      {{ item }}
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      // 定义一个数组，包含多个字符串元素
      items: ['Apple', 'Banana', 'Cherry']
    };
  }
};
</script>

<!-- 解释说明：
1. `v-for` 指令用于遍历数组或对象，并根据每个元素生成 DOM 结构。
2. `v-for="(item, index) in items"` 表示遍历 `items` 数组，`item` 是当前元素，`index` 是当前元素的索引。
3. `:key="index"` 是为了给每个生成的元素提供一个唯一的标识符，Vue 使用它来优化 DOM 更新。建议使用唯一标识符（如 ID），而不是索引，以避免潜在的问题。
4. `{{ item }}` 是 Vue 的插值语法，用于在模板中显示变量的值。
-->
上一篇：vue.config.js 配置