Vue 中 v-if 和 v-show 的区别？

v-if 和 v-show 都是 Vue 中用于条件性地显示元素的指令，但它们在实现方式和使用场景上有一些区别。

1. v-if：

   • 实现方式：v-if 是“真正”的条件渲染，当条件为假时，元素及其子组件完全不会被渲染到页面中，而是直接从 DOM 中移除。
   • 适用场景：适合在需要频繁切换显示状态的情况下，因为它会在条件不满足时销毁和重新创建元素，适用于那些不经常显示的情况。

   <div v-if="condition">Rendered when condition is true</div>
   

2. v-show：

   • 实现方式：v-show 是通过 CSS 的 display 属性来控制元素的显示和隐藏，在条件为假时，元素依然会被渲染到 DOM 中，只是通过 CSS 的方式隐藏了。
   • 适用场景：适合需要频繁切换显示状态的情况，因为它仅仅是通过 CSS 控制显示和隐藏，不会频繁地销毁和创建 DOM 元素。

   <div v-show="condition">Rendered but hidden when condition is false</div>
   

总的来说，v-if 适用于需要在条件变化不频繁的情况下切换显示状态，而 v-show 适用于需要频繁切换显示状态的情况，因为它只是简单地通过 CSS 控制显示和隐藏，不会频繁地销毁和创建 DOM 元素。