v-if
用于條件性的渲染一塊內(nèi)容蒸健，該塊內(nèi)容只有在指令的表達(dá)式返回值為true的時候被渲染
<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>
vue會盡可能的高效的渲染元素虚青，以上代碼執(zhí)行的時候涩咖，input中輸入的內(nèi)容將不會被替換，被替換的僅僅是placeholder
如果不想復(fù)用他們级野，想保持兩個元素是獨(dú)立的页屠，只需要在元素上加上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>
如此每次切換的時候元素都會被重新渲染
v-if和v-for一起使用
v-for將會比v-if有更高的優(yōu)先級，v-if將會分別重復(fù)運(yùn)行于每個v-for循環(huán)中
v-show
帶有v-show的元素將會始終被渲染在DOM中蓖柔，只是簡單的切換了元素的css樣式的dispaly
總結(jié)
- v-if是真正的條件渲染辰企，他會確保在切換過程中條件塊內(nèi)的時間和子組件被銷毀和重建（組件被重建將會調(diào)用created）
- v-show不論如何，都會被渲染在DOM中况鸣，當(dāng)條件為真值時牢贸，將會修改條件的css樣式
- v-if有更高的切換開銷，v-show有更高的初始渲染開銷
