条件渲染

• 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 属性