Vue.js当中v-if和v-show的区别

作者：CSDN-PleaSure乐事

欢迎大家阅读我的博客 希望大家喜欢

使用环境：WebStorm

目录

v-if和v-show举例

v-if

定义

特点

v-show

定义

特点

代码示例

v-if和v-show区别

原理

性能

适用性

---

v-if和v-show举例

首先我们还是简单回顾一下vue当中两者的语法。

v-if

定义

v-if 是一个条件渲染指令，用于根据表达式的值（真假）决定是否渲染元素。如果表达式为假，则该元素及其所有子元素都不会被渲染到DOM中。

特点

1. 当条件从真变为假时，Vue会销毁这个元素，并且清除其关联的所有事件监听器和子组件。
2. 当条件从假变为真时，Vue会重新创建并插入这些元素。

v-show

定义

v-show 同样是用于控制元素显示与否的指令，但它通过CSS的display属性来实现。无论初始条件如何，元素始终会被渲染到DOM中，只是通过设置display: none;或block;等来控制其可见性。

特点

1. 由于元素总是存在于DOM中，所以初次渲染时可能会比v-if稍慢一些。
2. 对于需要频繁切换显示状态的场景，v-show具有更好的性能，因为它只需要简单地改变CSS样式而不需要处理DOM更新。

代码示例

<template><div v-if="A === 'CSDN'">{{ result_1 }}</div><div v-else-if="A === 'csdn'">{{ result_2 }}</div><div v-else>{{ result_3 }}</div><span v-if="flag">v-if</span><br><span v-show="flag">v-show</span>
</template>
<script>
export default {data() {return {flag: true,A: 'CSDN',B: 'csdn',result_1: '练习时长两年半',result_2: '唱跳rap篮球',result_3: '你干嘛'}}
}
</script>

localhost启动效果：

F12输出：

v-if和v-show区别

原理

v-if 是“真正的”条件渲染，因为它会根据条件决定是否将元素添加到DOM树中。

而v-show 通过CSS的display属性来控制元素的显示与隐藏。无论初始条件如何，元素总是会被渲染并存在于DOM中，只是通过设置display: none;来隐藏。

性能

由于v-if涉及到DOM元素的创建与销毁，因此当条件频繁切换时（即从真变假或从假变真），这可能会带来一定的性能开销。

因为元素始终存在于DOM中，所以初次渲染时可能比v-if稍慢一些；但对于频繁切换可见性的操作来说，v-show的性能更好，因为它只需要更改CSS样式而无需处理DOM更新。

适用性

当某些组件或者元素不需要频繁显示/隐藏时使用，v-if更加适合。且对于那些初始化时就确定不显示且以后也很少改变其显示状态的情况非常适合，或者需要配合v-else和v-else-if来实现更复杂的条件逻辑，v-if也是首选。

当需要快速切换元素的可见性时，或者有需要经常展示和隐藏的内容，比如工具提示、菜单等交互性强的功能时，v-show更加合适。

作者：CSDN-PleaSure乐事

希望我的博客对您有帮助，也希望在对您有帮助时您可以为我留下点赞收藏与关注，这对我真的很重要，谢谢！