Vue – 条件渲染 v-if 和 v-show

条件渲染指令用来辅助开发者按需控制 DOM 的显示与隐藏。条件渲染指令有如下两个

v-if

v-if 的原理是：每次动态创建或移除元素，实现元素的显示和隐藏

• 如果刚进入页面的时候，某些元素默认不需要被展示，而且后期这个元素很可能也不需要被展示出来，此时 v-if 性能更好

v-else-if 和 v-else

v-if 可以单独使用，或配合v-else 指令一起使用;

注意：v-else 指令必须配合v-if 指令一起使用，否则它将不会被识别！

v-else-if 指令，顾名思义，充当v-if 的“else-if 块”，可以连续使用:

注意：v-else-if 指令必须配合v-if 指令一起使用，否则它将不会被识别

v-show

v-show 的原理是：动态为元素添加或移除 display: none 样式，来实现元素的显示和隐藏

• 如果要频繁的切换元素的显示状态，用 v-show 性能会更好