v-if

用于條件性的渲染一塊內(nèi)容，該塊內(nèi)容只有在指令的表達(dá)式返回值為true的時(shí)候被渲染

<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會(huì)盡可能的高效的渲染元素，以上代碼執(zhí)行的時(shí)候，input中輸入的內(nèi)容將不會(huì)被替換，被替換的僅僅是placeholder

如果不想復(fù)用他們，想保持兩個(gè)元素是獨(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>

如此每次切換的時(shí)候元素都會(huì)被重新渲染

v-if和v-for一起使用

v-for將會(huì)比v-if有更高的優(yōu)先級(jí)，v-if將會(huì)分別重復(fù)運(yùn)行于每個(gè)v-for循環(huán)中

v-show

帶有v-show的元素將會(huì)始終被渲染在DOM中，只是簡(jiǎn)單的切換了元素的css樣式的dispaly

總結(jié)

1. v-if是真正的條件渲染，他會(huì)確保在切換過(guò)程中條件塊內(nèi)的時(shí)間和子組件被銷毀和重建（組件被重建將會(huì)調(diào)用created）
2. v-show不論如何，都會(huì)被渲染在DOM中，當(dāng)條件為真值時(shí)，將會(huì)修改條件的css樣式
3. v-if有更高的切換開(kāi)銷，v-show有更高的初始渲染開(kāi)銷