Vue3中v-for与v-if为何不能直接共存于同一元素？-开发者社区

url: /posts/138b13c5341f6a1fa9015400433a3611/
title: Vue3中v-for与v-if为何不能直接共存于同一元素？
date: 2025-12-31T11:08:38+08:00
lastmod: 2025-12-31T11:08:38+08:00
author: cmdragon
cover: /images/generated_image_aa46ce2d-2900-409d-b5ff-b0b5c247ebd9.png

summary:
Vue中v-for可遍历数组和对象。数组遍历支持基础用法、索引、对象解构；对象遍历可获取value、key、index，三参数顺序为value、key、index。v-for与v-if共存需放，用key维护列表状态避免“就地更新”。数组mutation方法（push等）可直接检测更新，非mutation方法（filter等）需替换原数组。

categories:

tags:

基础入门
- v-for
Vue3
数组遍历
列表渲染
key
v-if
数组变化检测

扫描二维码)关注或者微信搜一搜：编程智域前端至全栈交流与成长

发现1000+提升效率与开发的AI工具和实用程序：https://tools.cmdragon.cn/

v-for 遍历数组：最基础的列表渲染

列表渲染的核心是遍历数据生成DOM，v-for最常见的用法是遍历数组。它的语法是item in items（或item of items，更贴近JS迭代器语法），其中items是源数据数组，item是当前元素的别名。

基础用法：遍历数组元素

比如我们有一个待办项数组，用v-for渲染成列表：

<!-- Composition API --> <script setup> import { ref } from 'vue' const todos = ref([ { id: 1, text: '学习Vue3' }, { id: 2, text: '写博客' }, { id: 3, text: '陪猫玩' } ]) </script> <template> <ul> <li v-for="todo in todos">{ { todo.text }}</li> </ul> </template> <!-- Options API --> <script> export default { data() { return { todos: [ { id: 1, text: '学习Vue3' }, { id: 2, text: '写博客' }, { id: 3, text: '陪猫玩' } ] } } } </script>

渲染结果会是三个<li>标签，分别显示待办内容。

带索引的遍历：跟踪元素位置

如果需要知道当前元素的索引，可以加上第二个参数index：

<template> <ul> <li v-for="(todo, index) in todos"> { { index + 1 }}. { { todo.text }} <!-- 索引从0开始，+1变成序号 --> </li> </ul> </template>

此时index会依次取0、1、2，配合+1就能生成“1. 学习Vue3”这样的序号。

解构赋值：简化代码

如果数组元素是对象，还可以用解构赋值直接取出需要的属性，让模板更简洁：

<template> <!-- 直接解构出text属性 --> <li v-for="{ text } in todos">{ { text }}</li> <!-- 带索引的解构 --> <li v-for="({ text }, index) in todos">{ { index + 1 }}. { { text }}</li> </template>

v-for 遍历对象：处理键值对集合

除了数组，v-for还能遍历对象的属性。语法是value in object，但通常我们会加上key（属性名）和index（索引）：

遍历对象的三个参数

v-for遍历对象时，参数顺序是：

value：对象属性的值
key：对象属性的名称
index：属性的索引（从0开始）

比如遍历一个文章信息对象：

<script setup> import { reactive } from 'vue' const article = reactive({ title: 'Vue3 v-for 教程', author: '张三', date: '2024-05-20' }) </script> <template> <ul> <li v-for="(value, key, index) in article"> { { index + 1 }}. { { key }}: { { value }} </li> </ul> </template>

渲染结果：

title: Vue3 v-for 教程
author: 张三
date: 2024-05-20

v-for 遍历范围：重复渲染固定次数

如果需要重复渲染某个元素N次，可以用v-for遍历一个整数范围。比如生成1到10的数字：

<template> <span v-for="n in 10">{ { n }} </span> <!-- 输出1 2 3 ... 10 --> </template>

注意：范围的起始值是1，不是0。

v-for 与 template 配合：渲染多个元素块

有时候我们需要用v-for渲染一组元素（比如“内容+分隔线”），但不想让这些元素被额外的DOM节点包裹。这时可以用<template>标签包裹v-for，它不会生成实际的DOM元素：

<template> <ul> <template v-for="todo in todos" :key="todo.id"> <li>{ { todo.text }}</li> <li role="presentation"></li> <!-- 分隔线 --> </template> </ul> </template>

这样渲染后，每个待办项后面都会跟一个分隔线，且不会多出多余的父节点。