Vue学习之 v-show 与 v-if 区别

v-if 是“真实的”按条件渲染，因为它确保了在切换条件时，条件区块的监听器和子组件都会被销毁重建。 v-if 也是懒性的：如果在初次渲染时条件值为false，则不会做任何事。条件区块只有当条件首次变为true时才被渲染。

相比之下 v-show 简单许多，元素无论初始条件如何，始终都会被渲染，只有CSS display属性会被 切换（display:none; display:block;）

总体来说，v-if 有更高的切换开销，而 v-show 有更高的渲染开销。

因此，如果需要频繁切换，则使用 v-show较好。

如果在运行时绑定条件很少改变，则 v-if 更合适。

<template>
  <!-- v-if  isBool=false-->
  <button v-if="isBool">按钮一 使用v-if</button>
  <!-- v-show isBool=false-->
  <button v-show="isBool">按钮而 使用v-show</button>
</template>

<script>
export default {
  data() {
    return {
      isBool: false,
    };
  },
};
</script>