条件渲染

条件渲染，可以实现元素的显示或隐藏。v-if、v-show 指令都能实现条件渲染。

v-if 条件渲染

指令语法：v-if="vue表达式"

vue表达式 的真值决定了该元素是否渲染，true则渲染，false则不渲染（不包含于真实dom中，压根就没这个元素）。

可以和配套指令一起使用：

v-if=con1
v-else-if=con2
...
v-else

// 流程控制伪码：
if(con1){
    渲染这个元素
} else if (con2) {
    渲染这个元素
} ... else {
    渲染最后这个元素
}

• 元素之间必须连续，不能穿插其他的元素（标签）。
• 需要多个元素共同作用时，请使用 <template> 打组。

组标签 template

使用 <template>...</template> 将多个标签打组，<template> 是vue内置的，不会渲染进真实dom，也不会影响页面结构，仅仅用于打组。

v-show 条件渲染

指令语法：v-if="vue表达式"。

和 v-if 类似，当 vue表达式 真值为true时，显示该元素，不然隐藏该元素。

• v-show 操作的是css的 display 属性，达到元素的隐藏。
• 在真实dom中是存在的，只是隐藏了。

v-if 与 v-show

v-if 是“真实的”：在切换时，条件区块内的事件监听器和子组件都会被销毁与重建。

v-if 也是惰性的：如果在初次渲染时条件值为 false，则不会做任何事。条件区块只有当条件首次变为 true 时才被渲染。

v-if重复渲染的开销较大。如果一个元素在页面上被频繁的隐藏和显示，建议使用v-show，因为此时使用v-if开销比较大。

v-if的优点：页面加载速度快，提高了页面的渲染效率。（能少渲染一些元素，当然快）

v-show 则简单许多，元素无论初始条件如何，始终会被渲染，只有 CSS display 属性会被切换。

v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要频繁切换，则使用 v-show 较好；如果在运行时绑定条件很少改变，则 v-if 会更合适。