4.2.1　条件渲染

条件渲染分为两种：一种是v-if，另一种是v-show。v-if又分为单路分支、双路分支和多路分支。只有if后面的值为true时才会有DOM元素，为false时不会有DOM元素。

1．v-if方式渲染

1）v-if

在<template>中配合v-if渲染，在使用v-if控制元素的时候，需要将它添加到这个元素上。然而，如果需要切换很多元素时，一个个添加较为麻烦。这时，就可以使用<template></template>将一组元素进行包裹，并在前面<template>使用v-if。注意，最终的渲染结果不会包含<template>元素。

运行的效果如图4-8所示。

图4-8　v-if运行效果图

2）v-else

v-else：可以使用v-else来表示v-if的“else块”。代码如下：

运行的效果如图4-9所示。

图4-9　v-else运行效果图

提示：v-else元素必须紧跟在v-if或者v-else-if元素的后面，否则它将不会被识别。

3）v-else-if

v-else-if：充当v-if的“else-if块”，可以链式地使用多次。代码如下：

    <div>
       <p v-if="number>=85">优秀</p>
       <p v-else-if="number>=60">及格</p>
      <p v-else="number<60">不及格</p>
    </div>

提示：类似于v-else，v-else-if必须紧跟在v-if或者v-else-if元素后面。

2．v-show方式渲染

另一个用于根据条件展示元素的是v-show指令，用法与v-if大致相同。代码如下：

    <h1 v-show="ok">Hello!</h1>
    <script>
       data:{
         ok:false
       }
    </script>

提示：不同的是，带有v-show的元素始终会被渲染并保留在DOM中。v-show是简单地切换元素的CSS属性display，例如<div style="display:none;"></div>。v-show有较高的初始渲染性能消耗，v-if有更高的切换性能消耗。在项目中建议，如果需要非常频繁地切换，则使用v-show较好；如果在运行时条件很少改变，则使用v-if较好。