vue 循环

作者：夏威夷丶霪男发布日期:2026-05-12 浏览:106

<template>
  <ul>
    <li v-for="(item, index) in items" :key="index">
      {{ item }}
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      items: ['Apple', 'Banana', 'Cherry']
    };
  }
};
</script>

解释说明：

v-for 是 Vue.js 中用于循环渲染列表的指令。
(item, index) in items：item 是当前项，index 是当前项的索引，items 是要遍历的数组。
:key="index"：为每个列表项提供一个唯一的标识符，确保 Vue 能够高效地更新 DOM。使用 index 作为键值是一个简单的方法，但在复杂情况下建议使用更稳定的唯一标识符。
{{ item }}：插值语法，用于在模板中显示变量的值。

这个示例展示了如何使用 v-for 指令来循环渲染一个简单的字符串数组。

上一篇：vue prop

下一篇：创建一个vue项目