HoRain云--Vue3条件渲染完全指南

🎬 HoRain 云小助手：个人主页

⛺️生活的理想，就是为了理想的生活!

⛳️ 推荐

前些天发现了一个超棒的服务器购买网站，性价比超高，大内存超划算！忍不住分享一下给大家。点击跳转到网站。

目录

⛳️ 推荐

一、v-if基础用法

二、v-else和 v-else-if

三、v-show替代方案

四、在 上使用 v-if

五、v-if与 v-for一起使用

六、性能与使用建议

七、实用技巧

关键要点

以下是Vue 3 条件渲染的完整指南，主要使用v-if、v-else、v-else-if和v-show指令来控制元素的显示与隐藏。

一、v-if基础用法

v-if指令用于条件性地渲染一块内容。只有当表达式返回真值时，元素才会被渲染到 DOM 中。

<template> <div> <!-- 单个条件 --> <p v-if="isVisible">这个段落会根据 isVisible 的值显示或隐藏</p> <!-- 条件判断 --> <button @click="toggle">切换显示</button> </div> </template> <script setup> import { ref } from 'vue'; const isVisible = ref(true); const toggle = () => { isVisible.value = !isVisible.value; }; </script>

二、v-else和v-else-if

可以创建链式的条件分支，类似于 JavaScript 的if...else if...else。

<template> <div> <!-- 条件链 --> <p v-if="score >= 90">优秀！</p> <p v-else-if="score >= 60">及格</p> <p v-else>不及格，需要努力</p> <!-- 计数器控制 --> <button @click="score += 10">加10分</button> <button @click="score -= 10">减10分</button> </div> </template> <script setup> import { ref } from 'vue'; const score = ref(85); </script>

三、v-show替代方案

v-show与v-if功能相似，但实现方式不同：

• v-if：真正的条件渲染。切换时，元素会被销毁/重建，会触发组件的生命周期钩子。

• v-show：通过 CSS 的display: none控制显示/隐藏，元素始终被渲染并保留在 DOM 中。

<template> <div> <!-- 使用 v-show（适合频繁切换的场景） --> <p v-show="showElement">我通过 display: none 隐藏</p> <!-- 使用 v-if（适合条件很少改变的场景） --> <p v-if="showElement">我会被完全移除/添加</p> <button @click=”showElement = !showElement“>切换</button> </div> </template> <script setup> import { ref } from 'vue’; const showElement = ref(true); </script>

四、在<template>上使用v-if

可以在<template>标签上使用v-if来分组渲染多个元素，而不会引入额外的 DOM 元素。

<template> <div> <!-- 分组条件渲染 --> <template v-if="isUserLoggedIn"> <h1>欢迎回来！</h1> <p>这是您的个人主页</p> <button>退出登录</button> </template> <template v-else> <h1>请先登录</h1> <button>登录</button> </template> </div> </template> <script setup> import { ref } from 'vue'; const isUserLoggedIn = ref(false); </script>

五、v-if与v-for一起使用

不推荐在同一元素上同时使用v-if和v-for，因为 Vue 处理指令时，v-for的优先级更高。正确的做法是：

<template> <div> <!-- 错误用法 --> <!-- <li v-for="item in items" v-if="item.isActive">错误：不要这样用</li> --> <!-- 正确用法1：通过计算属性过滤 --> <ul> <li v-for="item in activeItems" :key="item.id">{{ item.name }}</li> </ul> <!-- 正确用法2：在外层使用 <template> --> <template v-for="item in items" :key="item.id"> <li v-if="item.isActive">{{ item.name }}</li> </template> </div> </template> <script setup> import { computed, ref } from 'vue'; const items = ref([ { id: 1, name: '项目A', isActive: true }, { id: 2, name: '项目B', isActive: false }, { id: 3, name: '项目C', isActive: true }, ]); // 通过计算属性过滤 const activeItems = computed(() => items.value.filter(item => item.isActive)); </script>

六、性能与使用建议

七、实用技巧

1. 权限控制示例

<template> <div> <!-- 根据用户角色显示不同内容 --> <admin-panel v-if="user.role === 'admin'" /> <user-dashboard v-else-if="user.role === 'user'" /> <guest-view v-else /> </div> </template>

2. 数据加载状态

<template> <div> <div v-if="isLoading">加载中...</div> <div v-else-if="error">加载失败: {{ error }}</div> <div v-else>{{ data }}</div> </div> </template>

关键要点

1. 使用v-if实现真正的条件渲染，适合切换频率低的场景。

2. 使用v-show实现显示/隐藏切换，适合频繁切换的场景。

3. 用<template>包装多个元素，实现分组条件渲染。

4. 避免在同一元素上同时使用v-if和v-for。

5. 复杂的条件逻辑可考虑使用计算属性或方法来简化模板。

条件渲染是 Vue 的核心功能之一，合理使用可以构建出清晰、高效的界面逻辑。

❤️❤️❤️本人水平有限，如有纰漏，欢迎各位大佬评论批评指正！😄😄😄

💘💘💘如果觉得这篇文对你有帮助的话，也请给个点赞、收藏下吧，非常感谢!👍 👍 👍

🔥🔥🔥Stay Hungry Stay Foolish 道阻且长,行则将至,让我们一起加油吧！🌙🌙🌙