Vue.js 条件渲染指令：v-if vs v-show 详解

v-if 和 v-show 都是 Vue.js 中的条件渲染指令，用于根据条件来显示或隐藏元素。它们的区别如下：

渲染方式：v-if 是'真正的'条件渲染，它根据条件在 DOM 中创建或销毁元素。v-show 基于 CSS 的 display 属性来切换元素的可见性，通过修改 display 属性的值来显示或隐藏元素。
初始渲染消耗：v-if 在初始渲染时，如果条件为假，不会渲染元素到 DOM 中，可以减少初始渲染的消耗。而 v-show 在初始渲染时，无论条件为真还是假，都会渲染元素到 DOM 中，消耗更大。
切换开销：v-if 在条件切换时，会根据条件的变化来创建或销毁元素，切换开销较大。而 v-show 只需要修改 display 属性的值，切换开销较小。
编译条件：v-if 支持在模板中使用 v-else 和 v-else-if 来编写多个条件。v-show 只能单独使用，不能和 v-else 或 v-else-if 一起使用。

综上所述，如果需要在频繁切换条件的情况下，可以使用 v-show 来减少切换开销；如果条件很少改变，或者初始渲染消耗较大，可以使用 v-if 来优化性能。