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

1. v-if
原理：v-if 是 条件渲染，会根据条件判断来 动态地销毁和重建 DOM 元素。

性能：当条件为 false 时，v-if 会完全移除该元素及其所有子元素；当条件变为 true 时，它会重新渲染这个元素。适用于切换条件较少的场景，或者当切换频繁时不太重要。

使用场景：

当某些内容需要根据条件 动态添加/移除，比如很多数据需要时才渲染，避免浪费性能。

用于页面中多个不同内容块之间的切换。

 <div v-if="show">显示的内容</div>

2. v-show

原理：v-show 是 显示和隐藏，通过修改元素的 display 属性来控制元素的显示和隐藏。当条件为 false 时，元素会保持在 DOM 中，只是 display: none；当条件为 true 时，元素会显示出来。

性能：v-show 不会销毁和重建 DOM 元素，而是通过修改元素的 CSS 样式来控制显隐，因此性能上更适合 频繁切换显示隐藏 的场景。

<div v-show="show">显示的内容</div>