今天的內容將介紹條件渲染的兩種常見方式：v-if 和 v-show，雖然兩者功能相似都是「依照條件判斷決定內容是否呈現在畫面上」，但兩者仍然存在一些差異。

v-if 語法

透過條件判斷來控制內容是否渲染在畫面，使用上與程式語法的判斷式if雷同，v-if可以和v-else-if、v-else一起搭配，其中v-else-if 可以連續多次重複使用，此外，若是有多個元素皆根據相同條件來切換時，不想在外層使用<div>標籤包覆，還可以搭配<template> 標籤把多個元素包覆起來。

<h1 v-if="isShow">Title</h1>
<p v-if=" isShow ">content 1</p>
<p v-if=" isShow ">content 2</p>

等同於

<template v-if=" isShow ">
  <h1>Title</h1>
  <p>content 1</p>
  <p>content 2</p>
</template>

v-show 語法

與v-if 指令功能相似，主要不同之處在於渲染方式，v-show是依照條件判斷來「切換該元素display的CSS 屬性」，藉此控制內容是否呈現在畫面上。

<h1 v-show=" isShow "> Title </h1>

以下將透過實作範例來更詳細解說兩者的渲染方式：

首先是 v-if 的渲染方式

在尚未點擊+號按鈕時(v-if ="showModel"為false)，v-if的程式區塊並不會被渲染，直到點擊按鈕並觸發事件時(v-if ="showModel"為true)，才會渲染其程式區塊的內容並且呈現在畫面上。
如以下圖示藍底程式區塊

接著是 v-show 的渲染方式

在尚未點擊+號按鈕時(v-show =”showModel”為false)，v-show的程式區塊仍然會被渲染，但是透過利用style來轉換為display:none，使得無法看到其呈現畫面，直到點擊按鈕並觸發事件時(v-show =”showModel”為true)，其程式區塊內容才會呈現在畫面上。
如以下圖示藍底程式區塊

總結：比較 v-if 和 v-show 寫法與使用時機

兩者指令差別在於渲染方式、else和<template>使用。

• v-if
  當條件判斷為false時，v-if 的程式區塊會被刪除，直到當條件判斷為true才會將內容渲染出來，適合使用在條件不常改變的情況，此外可以搭配else和<template>標籤使用。
• v-show
  不管條件判斷為false還是true，v-show 的程式區塊一直都會顯示，透過style來轉換為display:none，表示html元素存在但無法看到其呈現的畫面，適合使用在需要頻繁切換顯示狀態的情況，此外不能搭配else和<template>標籤使用。