條件渲染

• v-else 元素必須緊跟在帶 v-if 或者 v-else-if 的元素的後面，否則它将不會被識别；
• v-if 指令隻會在指令的表達式傳回true時候被渲染；
• 上面使用 v-if，最終的渲染結果将不包含 元素；
• 當 v-if 與 v-for 一起使用時，v-for 具有比 v-if 更高的優先級,不推薦同時使用；
• v-show 的元素始終會被渲染并保留在 DOM 中，隻是簡單地切換元素的 CSS 屬性 display。 不支援 元素，也不支援 v-else。

v-if 與v-show的差別：

• v-if 是“真正”的條件渲染，因為它會確定在切換過程中條件塊内的事件監聽器和子元件适當地被銷毀和重建。
• v-if 也是惰性的：如果在初始渲染時條件為假，則什麼也不做——直到條件第一次變為真時，才會開始渲染條件塊。
• v-show 不管初始條件是什麼，元素總是會被渲染，并且隻是簡單地基于 CSS 進行切換。
• 總結：一般來說，v-if 有更高的切換開銷，而 v-show 有更高的初始渲染開銷。是以，如果需要非常頻繁地切換，則使用 v-show 較好；如果在運作時條件很少改變，則使用 v-if 較好。

key管理複用的元素

<div id="app">
			<div v-if="isShow">郵箱：<input type="text" name="" id=""></div>
			<div v-else>使用者名：<input type="text" name="" id=""></div>
		</div>
		<script type="text/javascript" src="vue.js"></script>
		<script type="text/javascript">
			var app = new Vue({
				el: "#app",
				data: {
					isShow: true
				}
			})

	//上述，修改為：
		<div v-if="isShow">郵箱：<input type="text" key="email"></div>
		<div v-else>使用者名：<input type="text" key="username"></div>
           

問題：當修改isShow的值後，v-else處的渲染輸入框裡面不會清除使用者已經輸入的内容。因為兩個模闆使用了相同的元素， 不會被替換掉——僅僅是替換了它的 placeholder，原因是 Vue 會盡可能高效地渲染元素，通常會複用已有元素而不是從頭開始渲染。

解決：給每一個input裡面隻需添加一個具有唯一值的 key 屬性