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

1、v-if:

v-if 指令是 Vue.js 中的一个条件渲染指令。
当 v-if 的条件为 false 时，元素及其内容将从 DOM 中完全移除。
适用于你期望大部分时间条件为 false，或者当你希望通过完全移除元素来节省资源时。

2、v-show:

v-show 指令同样也是一个条件渲染指令。
当 v-show 的条件为 false 时，该元素通过 CSS 的 display: none 属性进行隐藏，但仍然保留在 DOM 中。
适用于你期望条件频繁切换，并且希望通过保留元素在 DOM 中来实现更快速的切换。
使用场景:

当条件很少改变且你希望优化渲染性能时，请使用 v-if。
当你期望条件频繁变化，并希望在不添加/移除元素的情况下切换可见性时，请使用 v-show。
示例:

<template>
  <div>
    <p v-if="condition">如果条件为 false，这将从 DOM 中移除。</p>
    <p v-show="condition">如果条件为 false，这将通过 CSS 隐藏。</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      condition: true,
    };
  },
};
</script>

在这个示例中，v-if 当 condition 为 false 时从 DOM 中移除元素，而 v-show 隐藏元素但保留在 DOM 中。