v-if
字符串模板中，我們可以像這樣寫一個條件塊：
{{#if ok}}
<h1></h1>
{{/if}}在Vue中，我們使用v-if指令實現同樣的功能：
<h1 v-if="ok"></h1>也可以使用v-else添加一個else塊：
<h1 v-if="ok">yes</h1>
<h1 v-else>Ne</h1>(1)在<template>元素上使用v-if條件渲染分組
因爲v-if是一個指令，所以必須將它添加到一個元素上，如果想切換多個元素呢？可以使用<template>元素當做不可見的包裹元素。並在上面使用v-if。最終渲染結果將不包含<template>
<template v-if="ok">
<h1>title</h1>
<p>text</p>
</template>v-else
可以使用v-else指令來表示v-if的else塊：
<div v-if="Math.random() > 0.5"></div>
<div v-else></div>v-else元素必須緊跟在v-if或者v-else-if的元素後面，否則它將不會被識別
v-else-if
2.1.0新增
v-else-if，充當v-if的else-if塊：
<div v-if="type==='a'"></div>
<div v-else-if="type==='b'"></div>
<div v-else></div>用key管理可複用的元素
Vue會儘可能高效的渲染元素，通常會複用已有元素而不是重頭開始渲染。這樣除了使vuebiande 非常快，還有其他一些好處，例如允許用戶在不同的登錄方式之間切換：
<template v-if="login === 'a'">
<label>username</label>
<input />
</template>
<template v-else>
<label>Email</label>
<input />
</template>如上，切換login，將不會清除用戶已經輸入的內，因爲兩個模板使用相同的元素，input元素不會被替換掉--僅僅替換了他的placeholder。
但是這樣可能會被提bug，所以vue提供一種方式來表示這兩個元素是完全獨立的，只需要添加一個具有唯一值的key屬性即可：
<template v-if="loginType === 'username'">
<label>Username</label>
<input placeholder="Enter your username" key="username-input">
</template>
<template v-else>
<label>Email</label>
<input placeholder="Enter your email address" key="email-input">
</template>如上，但是沒有添加key的元素還是會被高效複用的。
v-show
另一個用於根據條件展示元素的選項是v-show指令。用法大致一樣：
<h1 v-show="ok">hello</h1>不同的是v-show的元素始終會被渲染並保存在DOM中，v-show只是簡單的切換元素的display。
v-if vs v-show
v-if 是“真正”的條件渲染，因爲它會確保在切換過程中條件塊內的事件監聽器和子組件適當地被銷燬和重建。
v-if 也是惰性的：如果在初始渲染時條件爲假，則什麼也不做——直到條件第一次變爲真時，纔會開始渲染條件塊。
相比之下，v-show 就簡單得多——不管初始條件是什麼，元素總是會被渲染，並且只是簡單地基於 CSS 進行切換。
一般來說，v-if 有更高的切換開銷，而 v-show 有更高的初始渲染開銷。因此，如果需要非常頻繁地切換，則使用 v-show 較好；如果在運行時條件很少改變，則使用 v-if 較好。
不推薦同時使用v-if和v-for!