当前位置：首页 > news >正文

Vue：列表渲染 (v-for)

news 2025/9/11 9:11:45

概述

Vue.js 中的 v-for 指令用于基于源数据多次渲染一个元素或组件，是 Vue 中最常用的指令之一。它提供了强大的列表渲染功能，支持数组、对象和范围值的遍历。

基本用法

数组遍历

const items = ref([{ message: 'Foo' }, { message: 'Bar' }])

<li v-for="item in items">{{ item.message }}
</li>

带索引的遍历

const parentMessage = ref('Parent')
const items = ref([{ message: 'Foo' }, { message: 'Bar' }])

<li v-for="(item, index) in items">{{ parentMessage }} - {{ index }} - {{ item.message }}
</li>

输出结果：

Parent - 0 - Foo
Parent - 1 - Bar

作用域说明

v-for 的作用域类似于 JavaScript 的 forEach 方法：

const parentMessage = 'Parent'
const items = [/* ... */
]items.forEach((item, index) => {// 可以访问外层的 parentMessage// item 和 index 只在这个作用域可用console.log(parentMessage, item.message, index)
})

使用解构

<li v-for="{ message } in items">{{ message }}
</li><!-- 有索引时 -->
<li v-for="({ message }, index) in items">{{ message }} {{ index }}
</li>

多层嵌套

<li v-for="item in items"><span v-for="childItem in item.children">{{ item.message }} {{ childItem }}</span>
</li>

使用 of 分隔符

<div v-for="item of items"></div>

对象遍历

基本对象遍历

const myObject = reactive({title: 'How to do lists in Vue',author: 'Jane Doe',publishedAt: '2016-04-10'
})

<ul><li v-for="value in myObject">{{ value }}</li>
</ul>

带键名的遍历

<li v-for="(value, key) in myObject">{{ key }}: {{ value }}
</li>

带索引的对象遍历

<li v-for="(value, key, index) in myObject">{{ index }}. {{ key }}: {{ value }}
</li>

使用范围值

v-for 可以接受整数值，基于 1...n 的范围重复渲染：

<span v-for="n in 10">{{ n }}</span>

注意：n 的初值是从 1 开始而非 0。

在 `<template>` 上使用 v-for

可以在 <template> 标签上使用 v-for 渲染多个元素：

<ul><template v-for="item in items"><li>{{ item.msg }}</li><li class="divider" role="presentation"></li></template>
</ul>

v-for 与 v-if

优先级问题

v-if 比 v-for 优先级更高，因此不能在同一元素上同时使用：

<!-- 错误示例 -->
<li v-for="todo in todos" v-if="!todo.isComplete">{{ todo.name }}
</li>

解决方案

使用 <template> 标签包装：

<template v-for="todo in todos"><li v-if="!todo.isComplete">{{ todo.name }}</li>
</template>

最佳实践

过滤列表：使用计算属性返回过滤后的列表
条件渲染列表：将 v-if 移至容器元素

通过 key 管理状态

为什么需要 key

Vue 默认使用"就地更新"策略，为了跟踪节点标识，需要提供唯一的 key：

<div v-for="item in items" :key="item.id"><!-- 内容 -->
</div>

在 `<template>` 上使用 key

<template v-for="todo in todos" :key="todo.name"><li>{{ todo.name }}</li>
</template>

key 的注意事项

key 应该是基础类型值（字符串或数字）
不要使用对象作为 key
推荐始终提供 key，除非迭代内容非常简单

在组件上使用 v-for

基本用法

<MyComponent v-for="item in items" :key="item.id" />

传递数据给组件

需要显式传递 props：

<MyComponentv-for="(item, index) in items":item="item":index="index":key="item.id"
/>

数组变化侦测

变更方法

Vue 能够侦听以下数组变更方法：

push()
pop()
shift()
unshift()
splice()
sort()
reverse()

替换数组

使用非变更方法时，需要替换整个数组：

// items 是一个数组的 ref
items.value = items.value.filter((item) => item.message.match(/Foo/))

Vue 会智能地重用 DOM 元素，保证高效更新。

展示过滤或排序后的结果

使用计算属性

const numbers = ref([1, 2, 3, 4, 5])const evenNumbers = computed(() => {return numbers.value.filter((n) => n % 2 === 0)
})

<li v-for="n in evenNumbers">{{ n }}</li>

在嵌套 v-for 中使用方法

const sets = ref([[1, 2, 3, 4, 5],[6, 7, 8, 9, 10]
])function even(numbers) {return numbers.filter((number) => number % 2 === 0)
}

<ul v-for="numbers in sets"><li v-for="n in even(numbers)">{{ n }}</li>
</ul>

注意 reverse() 和 sort()

这些方法会变更原始数组，应该先创建副本：

// 错误做法
return numbers.reverse()// 正确做法
return [...numbers].reverse()

总结图表

v-for 用法总结

数据类型	语法示例	说明
数组	`v-for="item in items"`	基本数组遍历
数组带索引	`v-for="(item, index) in items"`	带位置索引的遍历
对象	`v-for="value in object"`	遍历对象属性值
对象带键名	`v-for="(value, key) in object"`	带属性名的遍历
对象带索引	`v-for="(value, key, index) in object"`	带索引的对象遍历
范围值	`v-for="n in 10"`	基于1-n的范围渲染