Vue基础指令之v-if和v-show

一. v-if 和 v-show 都是条件渲染指令，通过判断条件来实现节点的显示和隐藏。

二. v-if 如果条件为false，则不会渲染DOM元素，也就是说元素并不存在于DOM树中。如果条件为true，则会动态插入元素到DOM树中。

三. v-show 如果条件为false，则会将元素的样式display属性设置为none，元素仍然存在于DOM树中。如果条件为true，则会将元素的样式display属性设置为原来的值。

四. v-if 和 v-show 的使用场景：

v-if：

• 需要根据条件动态渲染DOM元素，减少页面渲染负担；
• 需要频繁切换DOM元素的显示与隐藏。
• v-if是惰性的，即只有在条件为true的时候才会渲染DOM元素；
• v-if有更高的切换开销，因为它会在条件改变时销毁或重建子组件

v-show：

• 只是需要隐藏或显示DOM元素，不需要频繁地添加或删除DOM元素；
• 需要在一个组件中切换不同的子组件。
• v-show总是会渲染DOM元素，只是在条件为false的时候将其隐藏。