2.2　条件渲染

2.2.1　v-show

v-show指令可以根据条件展示元素，代码如下：

带有v-show的元素始终会被渲染并保留在DOM中，v-show只是通过简单地切换元素CSS属性display：none实现的。例如，将上面的代码v-show的值设置为false，代码如下：

在浏览器中运行的效果如图2.6所示。

2.2.2　v-if与v-else-if

v-if和v-show都可以实现条件渲染，但是v-if与v-show不同的是，v-if不是通过切换CSS属性实现显示与隐藏的，当v-if的值为false时，带有v-if的DOM元素就不会被渲染出来。v-if和v-show最大的不同就是，v-if不仅可以单独使用，还可以和v-else-if、v-else指令配合使用，类似于JavaScript中的if-else、if-else-if语句。

1．v-if

v-if用于条件性地渲染一部分内容。这部分内容只会在指令的表达式返回值为true的时候才被渲染。

index.html文件代码如下：

在浏览器中运行的效果如图2.7所示。

2．v-else-if

v-else-if指令类似于条件语句中的“else-if块”，可以与v-if配合使用。

index.html文件代码如下：

上面代码在浏览器中运行的结果为B，这里需要注意的是，v-else-if指令不能单独使用，必须跟在带有v-if或v-else-if的元素之后。

3．v-if和v-show的区别

v-if与v-show指令都可以根据表达式的值来控制元素的显示与隐藏状态。

v-if相比于v-show，更“真实”地实现了元素的渲染与移除，但是在频繁的切换过程中，使DOM元素不断地在内存中重建与销毁，这样便增加了内存的开销。

v-show是更简单的一种切换显示与隐藏状态的操作，只是修改了CSS属性中display的值，无论显示与隐藏，DOM元素始终被渲染。

综上所述，如果需要在页面中频繁地切换某个元素的显示状态，推荐使用v-show指令；如果在运行时条件很少改变，则推荐使用v-if指令。

2.2.3　v-else

在根据条件渲染DOM元素时，还可以使用v-else指令来表示“else块”，类似于JavaScript中的if-else逻辑语句。

index.html文件代码如下：

在浏览器中运行的效果如图2.8所示。

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

因为v-if是一个指令，所以必须将它添加到一个元素上。但是如果想切换多个元素应该如何操作呢？此时可以把一个<template>元素当作不可见的包裹元素，并在上面使用v-if。最终的渲染结果将不包含<template>元素。

index.html文件代码如下：

在浏览器中运行的效果如图2.9所示。

2.2.5　用key管理可复用的元素

Vue会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染。这样做除了使Vue的执行速度变得非常快之外，还有其他一些作用。例如，允许用户在不同的登录方式之间切换。

index.html文件代码如下：

在浏览器中运行，首先在输入框中输入“张三”，如图2.10所示，然后单击“切换”按钮，可以看到邮箱中显示的是“张三”，如图2.11所示。

在上面的示例中，切换状态并不会清空用户已经输入的内容，因为两个模板使用了相同的元素，<input>不会被替换掉，只是替换了它的placeholder属性。

这样也不总是符合实际需求，所以Vue提供了一种方式来表达“这两个元素是完全独立的，不要复用它们”。只需添加一个具有唯一值的key属性。

index.html文件代码如下：

在浏览器中运行，首先在输入框中输入“张三”，如图2.12所示，然后单击“切换”按钮，可以看到邮箱中的值为默认的placeholder属性的值，如图2.13所示。