【Vue.js基础教程】第7章：Vue列表渲染方法 v-for
【Vue.js基础教程】第7章：Vue列表渲染方法 v-for
代码简单说
发布于 2026-06-16 15:26:43
发布于 2026-06-16 15:26:43
Vue.js基础教程 第7章：Vue列表渲染方法v-for
欢迎关注 『Vue.js基础入门教程』 专栏，持续更新中
在这里插入图片描述
在这章中，我们将深入了解如何使用 Vue.js 中的 v-for 指令来渲染列表数据。
列表渲染
用 v-for 把一个数组对应为一组元素
v-for 是 Vue.js 提供的指令，用于基于数组数据渲染一个列表。它的语法非常简单，格式为 item in items，其中 items 是要渲染的数组，item 是当前遍历元素的别名。
<ul id="example-1">
<li v-for="item in items" :key="item.message">{{ item.message }}</li>
</ul>var example1 = new Vue({
el: '#example-1',
data: {
items: [
{ message: 'Foo' },
{ message: 'Bar' }
]
}
})结果显示：
- Foo
- Bar
在 v-for 中，我们还可以使用第二个参数来获取当前元素的索引：
<ul id="example-2">
<li v-for="(item, index) in items">
{{ parentMessage }} - {{ index }} - {{ item.message }}
</li>
</ul>var example2 = new Vue({
el: '#example-2',
data: {
parentMessage: 'Parent',
items: [
{ message: 'Foo' },
{ message: 'Bar' }
]
}
})结果：
- Parent - 0 - Foo
- Parent - 1 - Bar
你还可以使用 of 替代 in 来作为分隔符：
<div v-for="item of items"></div>在 v-for 里使用对象
除了数组，v-for 还支持遍历对象的属性。每次迭代时，v-for 会返回对象的值。如果需要获取对象的属性名和索引，可以使用以下语法：
<ul id="v-for-object" class="demo">
<li v-for="value in object">{{ value }}</li>
</ul>new Vue({
el: '#v-for-object',
data: {
object: {
title: 'How to do lists in Vue',
author: 'Jane Doe',
publishedAt: '2016-04-10'
}
}
})结果：
- How to do lists in Vue
- Jane Doe
- 2016-04-10
你还可以获取属性名（键名）和索引：
<div v-for="(value, name) in object">
{{ name }}: {{ value }}
</div>结果：
title: How to do lists in Vue
author: Jane Doe
publishedAt: 2016-04-10若要获取索引，可以再加一个参数：
<div v-for="(value, name, index) in object">
{{ index }}. {{ name }}: {{ value }}
</div>结果：
0. title: How to do lists in Vue
1. author: Jane Doe
2. publishedAt: 2016-04-10维护状态
当 Vue 更新 v-for 渲染的列表时，它默认使用“就地更新”的策略。如果数据项的顺序发生变化，Vue 会就地更新每个元素，而不是移动 DOM 元素来匹配数据的顺序。为了更高效地渲染，建议在使用 v-for 时为每个项提供一个唯一的 key 值：
<div v-for="item in items" v-bind:key="item.id"> <!-- 内容 --></div>尽量为 v-for 提供 key，除非遍历的内容非常简单，或者你刻意想依赖默认的更新策略。
数组更新检测
Vue 会自动侦测数组的变化，并触发视图更新。它包裹了数组的变更方法，如 push()、pop()、shift()、unshift()、splice()、sort() 和 reverse()。
例如：
example1.items.push({ message: 'Baz' })替换数组
与变更数组的方法不同，像 filter()、concat() 和 slice() 这些非变更方法会返回一个新数组，因此可以用新数组替换原数组。Vue 会智能地处理数组的替换，确保高效的 DOM 更新。
example1.items = example1.items.filter(function (item) {
return item.message.match(/Foo/)
})Vue 会智能地判断哪些元素需要更新，从而减少不必要的 DOM 渲染。
显示过滤/排序后的结果
有时你需要显示一个数组过滤或排序后的版本，但不想更改原始数据。这时，你可以通过计算属性来处理这个需求：
<li v-for="n in evenNumbers">{{ n }}</li>data: {
numbers: [1, 2, 3, 4, 5]
},
computed: {
evenNumbers: function () {
return this.numbers.filter(function (number) {
return number % 2 === 0
})
}
}在 v-for 里使用范围值
v-for 还可以用来遍历整数，这时它会重复渲染指定次数：
<div>
<span v-for="n in 10">{{ n }} </span>
</div>结果：1 2 3 4 5 6 7 8 9 10
在 <template> 上使用 v-for
与 v-if 一样，你可以在 <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。如果需要有条件地跳过渲染，可以将 v-if 放在外层元素上：
<ul v-if="todos.length">
<li v-for="todo in todos">
{{ todo }}
</li>
</ul>
<p v-else>No todos left!</p>在组件上使用 v-for
你可以在自定义组件上使用 v-for，例如：
<my-component v-for="item in items" :key="item.id"></my-component>但是组件的作用域与 v-for 不同，数据不会自动传递到组件里。你需要显式地使用 prop 将数据传递给组件：
<my-component v-for="(item, index) in items" v-bind:item="item" v-bind:index="index" v-bind:key="item.id"></my-component>在组件中，数据传递和 v-for 的配合更加灵活，有助于提升组件的复用性。
这样，你就掌握了 v-for 的使用方法及其各种技巧，接下来可以通过实际项目来巩固这些知识点。
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2024-12-23，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号