vue 循环数组

作者：潇洒一醉发布日期:2026-06-08 浏览:114

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

<script>
export default {
  data() {
    return {
      // 定义一个数组 items
      items: ['苹果', '香蕉', '橙子', '葡萄']
    };
  }
};
</script>

<style scoped>
/* 这里可以添加样式 */
</style>

解释说明：

v-for 是 Vue.js 中用于循环渲染列表的指令。它接受一个数组，并为数组中的每个元素生成一个 DOM 元素。
v-for="(item, index) in items"：这里的 item 表示数组中的每一个元素，index 表示当前元素的索引位置，items 是我们定义的数组。
:key="index"：给每个生成的元素绑定一个唯一的 key 属性，Vue 会利用这个 key 来优化更新 DOM 的效率。通常使用数组元素的唯一标识（如果有）作为 key，这里为了简单使用了 index。
{{ item }}：双大括号语法用于插值显示数据，这里会将数组中的每个元素显示在 <li> 标签中。

这样就可以轻松地在一个页面上循环渲染数组中的内容。

上一篇：vue3 事件

下一篇：vue signalr