條件渲染
v-if
<h3 v-if="ok">Yes</h3>
<h3 v-else>No</h3>
#在<template>元素上使用v-if條件渲染分組
因為v-if是一個指令，所以必須將它添加到一個元素上
<template v-if="ok">
? ? <h3>title</h3>
? ? <p>paragraph</p>
</template>
#v-else
可以使用v-else指令來表示v-if的else塊
<div v-if="Math.random() > 0.5">
? ? Now? you see
</div>
<div v-else>
? ? Now you?
</div>
v-else 元素必須緊跟在帶v-if或者v-else-if的元素的后面享扔，否則它將不會被識別
#v-else-if
充當v-if的“else-if塊”惧眠，可以連續(xù)使用
<div v-if="type === 'A' ">
? ? A
</div>
<div v-else-if="type === 'B' ">
? ? B
</div>
<div v-else-if="type === 'C'">
? ? C
</div>
<div v-else>
? ? Not A/B/C
</div>
類似于?v-else氛魁，v-else-if?也必須緊跟在帶?v-if?或者?v-else-if?的元素之后
#用key管理可復用的元素
Vue會盡可能高效地渲染元素捶码，通常會復用已有元素而不是從頭開始渲染
那么在上面的代碼中切換?loginType?將不會清除用戶已經(jīng)輸入的內(nèi)容或链。因為兩個模板使用了相同的元素株扛，不會被替換掉——僅僅是替換了它的?placeholder洞就。
<template v-if="loginType === 'username'">
? ? <label>UserName</label>
? ? <input placeholder="Enter your username">
</template>
<template v-else>
? ? ?<label>Email</label>
? ? ?<input placeholder="Enter your email address">
</template>
//現(xiàn)在，每次切換時油昂，輸入框都將被重新渲染冕碟。
<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 you email address" key="email-input">
</template>
? ? UserName? ? ? ? ?Email? ? ?
v-show
v-show指令根據(jù)條件是否展示元素. 注意，v-show?不支持<template>元素首尼，也不支持v-else??元素，也不支持?v-else
<h1 v-show="ok"></h1>
v-if? vs? v-show
v-if?是“真正”的條件渲染迎捺，因為它會確保在切換過程中條件塊內(nèi)的事件監(jiān)聽器和子組件適當?shù)乇讳N毀和重建凳枝。
v-if?也是惰性的：如果在初始渲染時條件為假岖瑰，則什么也不做——直到條件第一次變?yōu)檎鏁r锭环，才會開始渲染條件塊泊藕。
相比之下，v-show?就簡單得多——不管初始條件是什么玫锋，元素總是會被渲染讼呢，并且只是簡單地基于 CSS 進行切換悦屏。
一般來說，v-if?有更高的切換開銷甫贯，而?v-show?有更高的初始渲染開銷叫搁。因此渴逻，如果需要非常頻繁地切換音诫，則使用?v-show?較好竭钝；如果在運行時條件很少改變蜓氨，則使用?v-if?較好穴吹。
v-if 與 v-for 一起使用
當?v-if?與?v-for?一起使用時港令，v-for?具有比?v-if?更高的優(yōu)先級顷霹。
