Vue中控制组件的呈现与隐藏

1、v-if和v-else和v-else-if

• v-if指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回truthy值得时候被渲染
• 用v-else添加一个“else块”，当v-if为true时，此组件将被渲染，v-else表示false，此组件将被隐藏，同样当v-if为false时，v-else表示true
• v-else-if，顾名思义，充当v-if的“else-if块”，可以连续使用

   下图代码的渲染结果如下

2、v-show

• 带有 v-show 的元素始终会被渲染并保留在 DOM 中。只是通过v-show 的取值是true还是false简单地切换元素的 CSS 属性 display
• 用法和v-if大致一样

3、差异

• v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建
• 不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS 属性 display