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:
- vue
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>这样渲染后，每个待办项后面都会跟一个分隔线，且不会多出多余的父节点。
v-for 与 v-if 共存：避免优先级陷阱
重点注意：当v-for和v-if写在同一个元素上时，v-if的优先级更高！这意味着v-if的条件无法访问
