Vue 条件与循环渲染：v-if/v-else 与 v-for 的语法简介

「已注销」

于 2025-09-05 21:49:48 发布

阅读量747

点赞数 15

CC 4.0 BY-SA版权

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/2501_92798394/article/details/151231563

在 Vue 开发中，条件渲染（v-if/v-else）和循环渲染（v-for）是最常用的模板语法，它们让我们能够根据数据动态控制 DOM 元素的显示与列表渲染。

接下来跟随我的脚步，一起来看看这两种语法的用法、区别。

一、条件渲染：v-if /v-else/v-else-if

条件渲染用于根据表达式的真假来动态显示或隐藏元素，Vue 提供了 v-if、v-else、v-else-if 三个指令实现这一功能。

1. 基本用法

<template> <div class="condition-example">  <p v-if="isVisible">这是 v-if 渲染的内容</p>  <p v-else>这是 v-else 渲染的内容</p>  <div v-if="score >= 90">优秀</div> <div v-else-if="score >= 60">及格</div> <div v-else>不及格</div> </div> </template> <script setup> import { ref } from 'vue'; // 控制 v-if/v-else 的显示 const isVisible = ref(true); // 控制多条件判断 const score = ref(85); </script>

核心特点：

v-if 是 “真正的条件渲染”—— 当条件为假时，元素会被完全从 DOM 中移除，而非仅隐藏；
v-else 和 v-else-if 必须紧跟在 v-if 或 v-else-if 后面，否则无法识别；
条件表达式可以是任何返回布尔值的 JavaScript 表达式（如 score >= 90、isLogin && hasPermission）。

2. v-if 与 v-show 的区别

Vue 还提供 v-show 指令用于条件显示，它与 v-if 的核心区别在于元素是否被移除：

<template> <div>  <p v-if="isVisible">v-if 内容</p>  <p v-show="isVisible">v-show 内容</p> </div> </template>

特性	v-if	v-show
渲染方式	条件为真时才渲染元素	始终渲染元素，通过样式控制显示 / 隐藏
DOM 操作	会触发元素的创建 / 销毁	仅修改样式，元素始终存在
初始渲染成本	条件为假时，初始渲染成本低	无论条件真假，初始渲染成本高
切换成本	条件切换时，成本高（DOM 操作）	切换成本低（仅修改样式）
适用场景	条件很少切换（如权限判断）	条件频繁切换（如标签页切换）

3. 条件渲染的最佳实践

（1）避免在同一元素上使用 v-if 和 v-for

Vue 官方明确建议不要在同一元素上同时使用 v-if 和 v-for，因为 v-for 的优先级高于 v-if，会导致性能问题（循环中每次都要判断条件）。

错误示例：

 <ul> <li v-for="item in list" v-if="item.active" :key="item.id"> {{ item.name }} </li> </ul>

正确做法：先通过计算属性过滤数据，再循环渲染：

<template> <ul>  <li v-for="item in activeItems" :key="item.id"> {{ item.name }} </li> </ul> </template> <script> import { ref, computed } from 'vue'; const list = ref([ { id: 1, name: '选项1', active: true }, { id: 2, name: '选项2', active: false }, { id: 3, name: '选项3', active: true } ]); // 计算属性过滤数据 const activeItems = computed(() => { return list.value.filter(item => item.active); }); </script>

（2）使用 `<template>` 包裹多元素条件渲染

当需要条件渲染多个元素时，可使用 <template> 作为包裹容器（不会被渲染到 DOM 中）：

<template>  <template v-if="hasPermission"> <h3>权限内容标题</h3> <p>这是需要权限才能查看的内容</p> <button>操作按钮</button> </template> </template>

（3）为条件渲染的元素添加 key 提升性能

当切换 v-if/v-else 时，Vue 可能会复用已有元素以优化性能。若需避免复用（如表单输入场景），可添加 key 标识：

<template> <div> <template v-if="isEditing"> <input type="text" key="edit-input" placeholder="编辑模式"> </template> <template v-else> <input type="text" key="view-input" placeholder="查看模式"> </template> <button @click="isEditing = !isEditing">切换模式</button> </div> </template> <script> import { ref } from 'vue'; const isEditing = ref(false); </script>

添加不同 key 后，切换模式时输入框会被重新创建，而非复用，避免输入内容意外保留。

二、循环渲染：v-for

v-for 用于基于数组或对象渲染列表，是处理动态数据列表的核心指令。

1. 基本用法

（1）遍历数组

<template> <ul>  <li v-for="item in items" :key="item.id"> {{ item.name }} </li>  <li v-for="(item, index) in items" :key="item.id"> {{ index + 1 }}. {{ item.name }} </li> </ul> </template> <script> import { ref } from 'vue'; const items = ref([ { id: 1, name: '苹果' }, { id: 2, name: '香蕉' }, { id: 3, name: '橙子' } ]); </script>

（2）遍历对象

<template> <ul>  <li v-for="(value, key) in user" :key="key"> {{ key }}: {{ value }} </li>  <li v-for="(value, key, index) in user" :key="key"> {{ index + 1 }}. {{ key }}: {{ value }} </li> </ul> </template> <script> import { reactive } from 'vue'; const user = reactive({ name: '张三', age: 20, gender: '男' }); </script>

（3）遍历整数

v-for 还可以直接遍历整数，用于渲染固定次数的元素：

<template> <div>  <span v-for="n in 5" :key="n">★</span> </div> </template>

2. key 属性的重要性

v-for 渲染列表时，必须为每个项添加唯一的 key 属性，这是 Vue 虚拟 DOM Diff 算法的关键，用于识别列表项的身份，优化渲染性能。

 <li v-for="item in items" :key="item.id"> {{ item.name }} </li>

为什么需要 key？
当列表数据变化时（如增删、排序），Vue 会通过 key 判断哪些元素是新增的、删除的或移动的，从而只更新变化的部分，而非重新渲染整个列表。

key 的选择原则：

优先使用数据本身的唯一标识（如后端返回的 id）；
避免使用索引（index）作为 key—— 当列表排序或删除中间项时，索引会变化，导致 key 失效，反而影响性能；
若数据确实没有唯一标识，可使用 Symbol 或其他方式生成临时唯一 key。

3. 数组更新检测

Vue 对数组的一些方法进行了包裹，使得这些方法修改数组后会自动触发视图更新，这些方法被称为 “响应式数组方法”：

修改原数组的方法（会触发更新）：
- push()：添加元素到末尾
- pop()：删除末尾元素
- shift()：删除第一个元素
- unshift()：添加元素到开头
- splice()：添加 / 删除 / 替换元素
- sort()：排序
- reverse()：反转
返回新数组的方法（需替换原数组才会触发更新）：
- filter()
- concat()
- slice()

<template> <div> <ul> <li v-for="item in fruits" :key="item.id">{{ item.name }}</li> </ul> <button @click="addFruit">添加水果</button> <button @click="filterFruits">筛选苹果</button> </div> </template> <script> import { ref } from 'vue'; const fruits = ref([ { id: 1, name: '苹果' }, { id: 2, name: '香蕉' }, { id: 3, name: '橙子' } ]); // 使用 push() 修改原数组（自动更新视图） const addFruit = () => { fruits.value.push({ id: 4, name: '草莓' }); }; // 使用 filter() 返回新数组（需替换原数组才更新视图） const filterFruits = () => { fruits.value = fruits.value.filter(item => item.name === '苹果'); }; </script>

注意：直接通过索引修改数组元素（如 fruits.value[0] = { ... }）不会触发视图更新，需使用 splice 或替换整个数组：

// 错误：直接修改索引，不触发更新 fruits.value[0] = { id: 1, name: '红苹果' }; // 正确：使用 splice 修改 fruits.value.splice(0, 1, { id: 1, name: '红苹果' }); // 正确：替换整个数组 fruits.value = [...fruits.value.slice(0, 0), { id: 1, name: '红苹果' }, ...fruits.value.slice(1)];

4. 循环渲染的最佳实践

（1）始终指定 key 且确保唯一

如前所述，key 是优化列表渲染的关键，必须添加且确保唯一：

 <li v-for="item in products" :key="item.id"> {{ item.name }} </li>  <li v-for="(item, index) in products" :key="index"> {{ item.name }} </li>

（2）避免在 v-for 中修改原数据

循环渲染时，应避免直接在模板中修改数组元素（如 v-for 内部使用 v-model 绑定元素属性），推荐通过方法统一处理：

<template> <ul> <li v-for="item in items" :key="item.id"> <input type="text" :value="item.name" @input="(e) => updateItemName(item.id, e.target.value)" > </li> </ul> </template> <script> import { ref } from 'vue'; const items = ref([ { id: 1, name: '商品1' }, { id: 2, name: '商品2' } ]); // 统一方法更新数据，逻辑更清晰 const updateItemName = (id, newName) => { const item = items.value.find(item => item.id === id); if (item) { item.name = newName; } }; </script>

（3）使用计算属性处理列表数据

当需要对列表进行过滤、排序等操作时，优先使用计算属性处理，而非在 v-for 中直接处理，提高代码可读性和性能：

<template> <div> <input v-model="searchText" placeholder="搜索商品"> <ul>  <li v-for="item in filteredItems" :key="item.id"> {{ item.name }} </li> </ul> </div> </template> <script> import { ref, computed } from 'vue'; const items = ref([ { id: 1, name: '苹果手机' }, { id: 2, name: '华为平板' }, { id: 3, name: '小米手表' } ]); const searchText = ref(''); // 计算属性过滤数据 const filteredItems = computed(() => { return items.value.filter(item => item.name.toLowerCase().includes(searchText.value.toLowerCase()) ); }); </script>

（4）控制循环渲染的范围

对于大型列表（如 1000+ 项），直接全部渲染会导致性能问题，可采用 “分页” 或 “虚拟滚动” 优化：

<template> <div> <ul> <li v-for="item in currentPageItems" :key="item.id"> {{ item.name }} </li> </ul> <button @click="currentPage--" :disabled="currentPage === 1">上一页</button> <span>第 {{ currentPage }} 页</span> <button @click="currentPage++" :disabled="currentPage >= totalPages">下一页</button> </div> </template> <script> import { ref, computed } from 'vue'; // 模拟大量数据 const items = ref(Array.from({ length: 100 }, (_, i) => ({ id: i + 1, name: `项目 ${i + 1}` }))); const pageSize = 10; // 每页显示 10 条 const currentPage = ref(1); // 当前页码 // 计算当前页数据 const currentPageItems = computed(() => { const start = (currentPage.value - 1) * pageSize; const end = start + pageSize; return items.value.slice(start, end); }); // 计算总页数 const totalPages = computed(() => { return Math.ceil(items.value.length / pageSize); }); </script>

三、总结

条件渲染：
- v-if 完全移除 / 创建元素，v-show 仅隐藏 / 显示元素，根据场景选择；
- 避免 v-if 和 v-for 同时使用，优先用计算属性过滤数据；
- 多元素条件渲染用 <template> 包裹，减少额外 DOM 节点。
循环渲染：
- 始终为 v-for 项添加唯一 key，优先使用数据的唯一标识；
- 熟悉响应式数组方法，直接修改索引不会触发更新；
- 大型列表需分页或虚拟滚动优化性能；
- 用计算属性处理过滤、排序等逻辑，提高代码可读性。

好了好了，Vue 条件与循环渲染分享到此结束！

Vue 条件与循环渲染：v-if/v-else 与 v-for 的语法简介

一、条件渲染：v-if /v-else/v-else-if

1. 基本用法

2. v-if 与 v-show 的区别

3. 条件渲染的最佳实践

（1）避免在同一元素上使用 v-if 和 v-for

（2）使用 <template> 包裹多元素条件渲染

（3）为条件渲染的元素添加 key 提升性能

二、循环渲染：v-for

1. 基本用法

（1）遍历数组

（2）遍历对象

（3）遍历整数

2. key 属性的重要性

3. 数组更新检测

4. 循环渲染的最佳实践

（1）始终指定 key 且确保唯一

（2）避免在 v-for 中修改原数据

（3）使用计算属性处理列表数据

（4）控制循环渲染的范围

三、总结

（2）使用 `<template>` 包裹多元素条件渲染