vue 条件渲染(v-if v-else-if v-else v-show)

好的,我们来详细讲解 Vue 中用于条件渲染的四个指令:v-if, v-else-if, v-elsev-show

这四个指令都用于根据条件来显示或隐藏元素,但它们的工作方式和适用场景有非常重要的区别,特别是 v-ifv-show 的对比,是 Vue 面试中的高频题。


v-ifv-else-ifv-else:真正的条件渲染

这一组指令用于实现程序中经典的 if...else if...else 逻辑。它们是**"真正的"条件渲染,因为它们会真正地创建或销毁** DOM 元素。

  • v-if: 当指令的表达式返回真值 (Truthy) 时,元素及其内容才会被渲染。
  • v-else-if : 必须紧跟在 v-if 或另一个 v-else-if 后面。当前面的条件不满足,而自身的条件满足时,它才会被渲染。
  • v-else : 必须紧跟在 v-ifv-else-if 后面。当所有前面的条件都不满足时,它会被渲染。
工作原理

如果条件为 false,包含 v-if 的元素以及它所有的子组件和事件监听器都会被从 DOM 中完全移除(销毁) 。当条件变为 true 时,它们才会被重新创建和挂载

示例:根据分数显示不同等级
html 复制代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>v-if 示例</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
    <h3>请输入您的分数 (0-100)</h3>
    <input type="number" v-model.number="score" min="0" max="100">
    
    <div v-if="score >= 90" style="color: green; margin-top: 10px;">
        <p>等级: 优秀 (A)</p>
        <span>继续努力,你是最棒的!</span>
    </div>
    <div v-else-if="score >= 75" style="color: blue; margin-top: 10px;">
        <p>等级: 良好 (B)</p>
    </div>
    <div v-else-if="score >= 60" style="color: orange; margin-top: 10px;">
        <p>等级: 及格 (C)</p>
    </div>
    <div v-else style="color: red; margin-top: 10px;">
        <p>等级: 不及格 (D)</p>
        <span>需要加油哦!</span>
    </div>
</div>

<script>
    const { createApp, ref } = Vue;
    createApp({
        setup() {
            const score = ref(95);
            return { score };
        }
    }).mount('#app');
</script>
</body>
</html>

关键点 :在上面的例子中,同一时间 DOM 中只会存在四个等级 div 中的一个。你可以打开浏览器的开发者工具查看元素的变化。


v-show:基于 CSS 的显示切换

v-show 也用于根据条件显示或隐藏元素,但它的工作方式要简单得多。

工作原理

无论 v-show 的条件是 true 还是 false元素始终都会被渲染在 DOM 中v-show 只是简单地通过切换元素的 CSS display 属性来控制其可见性。

  • 条件为 false 时:元素会被添加内联样式 style="display: none;"
  • 条件为 true 时:display: none; 会被移除,元素恢复可见。
示例:切换内容的可见性
html 复制代码
<div id="app2">
    <button @click="isVisible = !isVisible">切换显示</button>
    
    <h3 v-show="isVisible" style="margin-top: 10px;">
      你好,我在这里!
    </h3>
</div>

<script>
    createApp({
        setup() {
            const isVisible = ref(true);
            return { isVisible };
        }
    }).mount('#app2');
</script>

关键点 :当你切换按钮时,<h3> 标签只是在显示和隐藏之间切换,它从未被销毁或重新创建。


v-ifv-show 的核心区别与选择 (面试高频题)

这是理解条件渲染最重要的一环。

特性 v-if v-show
实现方式 真正的条件渲染,动态地创建或销毁DOM节点和组件。 基于 CSS display 属性的切换。
DOM中是否存在 条件为 false 时,元素不存在于 DOM 中。 无论条件如何,元素始终存在于 DOM 中。
初始渲染开销 如果条件初始为 false,开销极低,因为它什么也不做。 无论条件如何,都有正常的初始渲染开销
切换开销 。每次切换都涉及元素的销毁和重建。 。只是修改 CSS 属性,非常轻量。
如何选择?

根据它们的开销特性,我们可以得出清晰的选择策略:

  • 使用 v-if 的场景

    • 当条件不经常改变时(例如,一次性的权限判断)。
    • 当初始条件为 false 时,可以节省初始渲染的性能
    • 当你需要确保元素及其子组件被完全销毁和重建时。
  • 使用 v-show 的场景

    • 当需要非常频繁地切换元素的可见性时(例如,Tab 切换、折叠面板、模态框的显示/隐藏)。

一个简单的记忆法则

频繁切换用 v-show,条件不常变用 v-if

相关推荐
涛哥码咖6 分钟前
chrome安装AXURE插件后无效
前端·chrome·axure
OEC小胖胖18 分钟前
告别 undefined is not a function:TypeScript 前端开发优势与实践指南
前端·javascript·typescript·web
行云&流水39 分钟前
Vue3 Lifecycle Hooks
前端·javascript·vue.js
Sally璐璐1 小时前
零基础学HTML和CSS:网页设计入门
前端·css
老虎06271 小时前
JavaWeb(苍穹外卖)--学习笔记04(前端:HTML,CSS,JavaScript)
前端·javascript·css·笔记·学习·html
三水气象台1 小时前
用户中心Vue3网页开发(1.0版)
javascript·css·vue.js·typescript·前端框架·html·anti-design-vue
灿灿121381 小时前
CSS 文字浮雕效果:巧用 text-shadow 实现 3D 立体文字
前端·css
烛阴1 小时前
Babel 完全上手指南:从零开始解锁现代 JavaScript 开发的超能力!
前端·javascript
AntBlack2 小时前
拖了五个月 ,不当韭菜体验版算是正式发布了
前端·后端·python
31535669132 小时前
一个简单的脚本,让pdf开启夜间模式
前端·后端