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較好。