vue for循环

作者：风皇霸陵发布日期:2026-01-09 浏览:89

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

<script>
export default {
  data() {
    return {
      // 定义一个数组，用于 v-for 遍历
      items: ['Item 1', 'Item 2', 'Item 3', 'Item 4']
    };
  }
};
</script>

解释说明：

v-for 是 Vue.js 中用于循环渲染列表的指令。
(item, index) in items：item 是当前元素，index 是当前元素的索引，items 是要遍历的数组。
:key="index"：为每个元素提供一个唯一的键值，帮助 Vue 更高效地更新 DOM。

上一篇：nginx部署前端vue项目

下一篇：vue foreach