4.2.1　條件渲染

條件渲染分為兩種：一種是v-if，另一種是v-show。v-if又分為單路分支、雙路分支和多路分支。只有if后面的值為true時(shí)才會(huì)有DOM元素，為false時(shí)不會(huì)有DOM元素。

1．v-if方式渲染

1）v-if

在<template>中配合v-if渲染，在使用v-if控制元素的時(shí)候，需要將它添加到這個(gè)元素上。然而，如果需要切換很多元素時(shí)，一個(gè)個(gè)添加較為麻煩。這時(shí)，就可以使用<template></template>將一組元素進(jìn)行包裹，并在前面<template>使用v-if。注意，最終的渲染結(jié)果不會(huì)包含<template>元素。

運(yùn)行的效果如圖4-8所示。

圖4-8　v-if運(yùn)行效果圖

2）v-else

v-else：可以使用v-else來(lái)表示v-if的“else塊”。代碼如下：

運(yùn)行的效果如圖4-9所示。

圖4-9　v-else運(yùn)行效果圖

提示：v-else元素必須緊跟在v-if或者v-else-if元素的后面，否則它將不會(huì)被識(shí)別。

3）v-else-if

v-else-if：充當(dāng)v-if的“else-if塊”，可以鏈?zhǔn)降厥褂枚啻巍４a如下：

    <div>
       <p v-if="number>=85">優(yōu)秀</p>
       <p v-else-if="number>=60">及格</p>
      <p v-else="number<60">不及格</p>
    </div>

提示：類(lèi)似于v-else，v-else-if必須緊跟在v-if或者v-else-if元素后面。

2．v-show方式渲染

另一個(gè)用于根據(jù)條件展示元素的是v-show指令，用法與v-if大致相同。代碼如下：

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

提示：不同的是，帶有v-show的元素始終會(huì)被渲染并保留在DOM中。v-show是簡(jiǎn)單地切換元素的CSS屬性display，例如<div style="display:none;"></div>。v-show有較高的初始渲染性能消耗，v-if有更高的切換性能消耗。在項(xiàng)目中建議，如果需要非常頻繁地切換，則使用v-show較好；如果在運(yùn)行時(shí)條件很少改變，則使用v-if較好。