v-if Vs v-show

v-if 和 v-show 的区别？

官方文档说明

个人理解

v-if

1. v-if 底层是 display
2. 它是 lazy的，只有 条件 为 true才会渲染

v-show

1. v-show 底层是 visibility
2. 无论条件 true/false, 都会占位渲染，只是展示与否

选择☑️

如果频繁 toggle ☑️展示与否，用 v-show;
如果只是一开始根据条件决定渲染，用 v-if

visibility(可见） Vs display（展示）

visibility:hidden- It is not visible but gets up it’s original space whereas, display:none- It is hidden and takes no space.