v-if和v-show的区别

共同点

• 都是 Vue的内置指令
• 都能控制元素的 显示和隐藏

区别

• v-show 是通过控制 元素 的 display， 通过设置为 none 来实现元素的隐藏， 初始值无论是true或false，都会进行编译，且只会编译一次，后续状态变更仅改变 display的值。 频繁切换开销比较小。

• v-if 是 动态的向 DOM树中插入和删除DOM元素，若初始值为 false，则跳过编译。 后续状态变更，每次都会重新向 DOM树中插入或删除DOM元素。 频繁切换开销比较大。

选择

• 对于不需要频繁切换状态的，选择使用 v-if
• 对于频繁切换状态的，选择使用 v-show。