v-if 和 v-show 的差异及最优使用场景

查看本专栏目录

关于作者

还是大剑师兰特：曾是美国某知名大学计算机专业研究生，现为航空航海领域高级前端工程师；CSDN知名博主，GIS领域优质创作者，深耕openlayers、leaflet、mapbox、cesium，canvas，webgl，echarts等技术开发，欢迎加底部微信，一起交流。

热门推荐	内容链接
1	openlayers 从基础到精通，300+代码示例
2	leaflet 热门分解学习教程，150+图文示例
3	cesium 从0到1学习指南，200+代码示例
4	mapboxGL 从入门到实战，150+图文示例
5	canvas 示例应用100+，揭密底层细节
6	javascript从基础到高级，示例展示200+
7	vue2 实战指南，100+个细节深度剖析

v-if和v-show都是Vue.js中的条件渲染指令，它们都可以根据表达式的值来决定是否渲染一个元素。但是它们的工作方式不同，因此在使用上也有一些区别。

v-if: 条件渲染

v-if指令根据表达式的值（真/假）来决定是否渲染一个元素。如果表达式的值为假（false），则元素及其子元素不会被渲染到DOM中；如果为真（true），则元素会被渲染。

使用规则：

单一用途： v-if适用于条件不经常改变的场景。每次条件改变时，Vue会创建或销毁元素，这意味着与该元素关联的数据绑定和事件监听器也会被创建或销毁。

块级作用域： v-if具有块级作用域，这意味着它会影响其内部所有子元素的渲染。

性能考虑： 频繁切换v-if可能会导致性能问题，因为每次状态改变都会导致元素的重新渲染。

v-show: 显示/隐藏

v-show指令用于控制元素的显示和隐藏，而不是真正地从DOM中移除或添加元素。它通过CSS的display属性来实现元素的显示和隐藏。

使用规则：

频繁切换： v-show适用于需要频繁切换条件的场景。因为它只是通过CSS来控制元素的显示和隐藏，所以不会像v-if那样导致元素的重新渲染。

性能考虑： 由于v-show只是通过CSS来控制元素的显示和隐藏，所以它的性能比v-if更好。

初始渲染： v-show在初始渲染时总是会渲染元素，无论条件是否满足。而v-if只有在条件满足时才会渲染元素。

代码示例

<template>
  <div>
    <button @click="toggle">Toggle</button>
    <div v-if="isVisible" class="box">This is a box (v-if)</div>
    <div v-show="isVisible" class="box">This is a box (v-show)</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isVisible: true
    };
  },
  methods: {
    toggle() {
      this.isVisible = !this.isVisible;
    }
  }
};
</script>

<style>
.box {
  width: 100px;
  height: 100px;
  background-color: #ccc;
  margin-top: 10px;
}
</style>

在这个例子中，我们有两个div元素，分别使用v-if和v-show指令来控制它们的显示和隐藏。当点击“Toggle”按钮时，isVisible的值会切换，从而触发元素的显示和隐藏。可以看到，使用v-if的元素会在条件不满足时从DOM中移除，而使用v-show的元素只会通过CSS来控制显示和隐藏。

专栏目标

在vue和element UI联合技术栈的操控下，本专栏提供行之有效的源代码示例和信息点介绍，做到灵活运用。

提供vue2的一些基本操作：安装、引用，模板使用，computed，watch，生命周期(beforeCreate，created,beforeMount，mounted, beforeUpdate，updated, beforeDestroy，destroyed，activated，deactivated，errorCaptured，components，)、 $root , $parent , $children , $slots , $refs , props, $emit , eventbus ,provide / inject, Vue.observable, $listeners, $attrs, $nextTick , v-for, v-if, v-else,v-else-if，v-on，v-pre，v-cloak，v-once，v-model， v-html, v-text, keep-alive，slot-scope， filters, v-bind，.stop, .native, directives，mixin，render，国际化，Vue Router等