今天我們會來簡單介紹v-if和v-show，並對這兩者進行比較，探討它們的差異在哪裡~~

v-if

v-if昨天其實有提到一點點，它其實就是用於條件性的渲染內容，這個內容只會在指令表達式返回真值的時候被渲染。
還有幾個通常會和v-if一起用的指令:

• v-else:前面必須要有v-if或v-else-if
• v-else-if:前面必須要有v-if或v-else-if
  接著來看他們三個的例子吧~
  
  這個例子是說如果 type等於“A”，就會輸出 ‘你選了A對吧’，以此類推，如果選ABC以外的東西，像是false，就會出現 ‘為什麼不選A\B\C’，概念很簡單對吧!!

v-show

再來看看這個和v-if概念有點相似的v-show，用法其實大同小異，不同的點是帶有v-show的元素始終會被渲染並保留在DOM中。v-show只是簡單切換CSS property ，並判斷它的真值。來個小例子唄~~

判斷cute的真值來顯示 ‘你超可愛’這句話，非常簡單的小例子!!

比較v-if和v-show

這兩者的差異有個最明顯的差異就是有無else，在使用方面如果有其他條件就使用v-if，不然其實v-if和v-show是一樣的。
在HTML渲染方面，v-if是有條件式的渲染，若條件為true才會渲染，而v-show則是一直都在渲染，若碰到真值就會顯現出來，沒有的話就隱藏(inline style css)。
也就是說v-if在切換的時候開銷比較大，v-show在初始渲染的時候開銷比較大，所以，如果要一直頻繁切換用v-show比較好，如果沒有用v-if比較好。

結語

今天的內容很平易近人吧~!是不是突然覺得Vue又變可愛了，但這真的是錯覺，後面可是越來越可怕嗚嗚╯︿╰