Vue 条件渲染（v-if 与 v-show）——Vue 学习笔记（六）

v-if

v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 truthy 值的时候被渲染。例如:

不推荐同时使用 v-if 和 v-for，当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级。

（1）在 <template> 元素上使用 v-if 条件渲染分组

因为 v-if 是一个指令，所以必须将它添加到一个元素上。

如果想渲染多个元素，可以把一个 <template> 元素当作不可见的包裹元素，并在上面使用 v-if，最终的渲染结果将不包含 <template>。

（<template> 标签在没有引用 vue.js 的界面表现为不会渲染任何信息，因为此标签天生不可见，默认 display: none，不过可以用 js 对其进行操作）

（2）v-else

可以使用 v-else 指令来表示 v-if 的“else 块”：

v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别（不会出现在界面和 DOM 节点树上）。

（3）v-else-if

充当 v-if 的“else-if 块”，可以连续使用：

类似于 v-else，v-else-if 也必须紧跟在带 v-if 或者 v-else-if 的元素之后（否则不会出现在界面和 DOM 节点树上）。

（4）用 key 管理可复用的元素

Vue 通常会复用已有元素而不是从头开始渲染，除了有利于提高渲染效率，还有一些其他用处，例如，你允许用户切换登录方式：

在这个例子中，切换 type 并不会清除输入框内的值用户已输入的内容，因为两个模板都使用了 <input>，切换 type 时，只会替换掉不同的 attribute（比如 placeholder 和 id），其内部保存的用户输入是会保留的。对于 <label>，如果将两个 <label> 设置成相同的值，切换 type 也不会重新渲染。

Vue 也提供了一种方式来表达：这两个元素是完全独立的，不需要复用。只需添加一个具有唯一值的 key attribute 即可：

现在切换 type 后，<input> 元素将重新渲染。如果将 key attribute 设置成相同的值，则会复用。

v-show

v-show 也可以根据条件展示元素。

注意，v-show 不支持 <template> 元素，也不支持 v-else：

v-show="false" 对 <template> 不起作用。

不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS property display：

对比 v-if：

v-if 与 v-show 的异同

同：

都是根据条件展示元素。

异：

（1）对元素的操作：v-if 是根据条件动态地进行增删 DOM 元素，v-show 是动态地隐藏和显示元素。

（2）性能消耗：v-if 因为是对元素进行增删，所以切换开销更大，如果需要频繁地切换，则使用 v-show 较好。

（3）渲染时机：v-if 直到条件第一次变为真时，才会开始渲染条件块，v-show 则不管条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。

（4）标签支持：v-if 支持 <template> 和 v-else，v-show 反之。

（5）复用：v-if 支持复用，v-show 不会复用，只会切换元素的 display attribute。