vue 数组循环

作者：一剑绝尘发布日期:2026-06-18 浏览:72

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

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

解释说明：

v-for="(item, index) in items"：这是 Vue.js 中用于循环渲染数组的指令。item 是当前元素，index 是当前元素的索引，items 是要遍历的数组。
:key="index"：为每个列表项提供一个唯一的 key 属性，这有助于 Vue 更高效地更新 DOM。
{{ item }}：双大括号语法用于插值，显示数组中的每一项。

如果需要进一步了解或有其他问题，请告诉我！

上一篇：vue图片懒加载

下一篇：vue设置div滚动条滚动到指定位置