# 條件渲染指令 ## v-if、v-else-if、v-else 指令是帶有 v- 前綴的特殊屬性。指令用于在表達式的值改變時，將某些行為應用到 DOM 上。例如 ``` <template> <view> <text v-if="seen">{{message}}</text> </view> </template> <script> export default { data: { seen: true, message: 'un-app跨平臺移動應用開發快速入門' } } </script> ``` > v-if 指令將根據表達式 seen 的值(true 或 false )來決定是否插入 text 元素。 因為 v-if 是一個指令，所以必須將它添加到一個元素上。但是如果想切換多個元素呢？此時可以把一個` <block> `元素當做包裹元素，并在上面使用 v-if。最終的渲染結果將不包含` <block>` 元素。 ``` <block v-if="ok"> <view>Title</view> <view>Paragraph 1</view> <view>Paragraph 2</view> </block> ``` 你可以使用 v-else 指令來表示 v-if 的 else 塊： ``` <view v-if="Math.random() > 0.5"> Now you see me </view> <view v-else> Now you don't </view> ``` v-else-if，顧名思義，充當 v-if 的“else-if 塊”，可以連續使用： ``` <view v-if="type === 'A'"> A </view> <view v-else-if="type === 'B'"> B </view> <view v-else-if="type === 'C'"> C </view> <view v-else> Not A/B/C </view > ``` 類似于 v-else，v-else-if 也必須緊跟在帶 v-if 或者 v-else-if 的元素之后。 ## v-show 另一個用于根據條件展示元素的選項是 v-show 指令。用法大致一樣： ``` <view v-show="ok">Hello!</view> ``` 不同的是帶有 v-show 的元素始終會被渲染并保留在 DOM 中。v-show 只是簡單地切換元素的 CSS 屬性 display。 > 注意，v-show 不支持 `<template> `元素，也不支持 v-else。 v-if 是“真正”的條件渲染，因為它會確保在切換過程中條件塊內的事件監聽器和子組件適當地被銷毀和重建。 v-if 也是惰性的：如果在初始渲染時條件為假，則什么也不做——直到條件第一次變為真時，才會開始渲染條件塊。 相比之下，v-show 就簡單得多——不管初始條件是什么，元素總是會被渲染，并且只是簡單地基于 CSS 進行切換。 > 一般來說，v-if 有更高的切換開銷，而 v-show 有更高的初始渲染開銷。因此，如果需要非常頻繁地切換，則使用 v-show 較好；如果在運行時條件很少改變，則使用 v-if 較好。