v-if 和 v-show 的区别
v-if="show" 当 show:true 元素就会被显示 ，当 show:false ，v-if对应的标签根本就不存在DOM之上了。
v-show="show" 当show:true 元素显示，当 show:false ，v-show对应的标签依然存在，以style="display: none;" 的形式存在DOM之上。
so：v-show 指令 的性能更高，v-show不会频繁地增加删除操作DOM元素。v-if 每一次的隐藏和显示DOM 都是在对dom的删除或者添加。
v-else：当 v-if 对应的表达式为 false 的时候，执行 v-else
<div v-if="show" >hello world!</div>
<div v-else>bye world!</div>
v-else 要紧贴着 v-if 使用
v-else-if
<div v-if="show === 'a'" >This is A</div>
<div v-else-if="show === 'b'">This is B</div>
<div v-else>This is C</div>
v-if ,v-else-if, v-else 这三个指令要紧贴着使用，中间不能被其他标签所分隔。
<div v-if="show" >用户名：<input /></div>
<div v-else>邮箱名：<input /></div>
当vm.$data.show 从 true 修改为false ，dom也会进行相应的修改
当时input输入框并没有清空，因为Vue在重新渲染界面的时候会尽量地去复用页面上已经存在的dom。（复用机制），那如何解决呢？
我们可以给每个input 添加一个 key 值。
<div v-if="show" >用户名：<input key='username'/></div>
<div v-else>邮箱名：<input key='email'/></div> 
当你给每个标签加上key值后，vue就不会复用两个不同的标签了。这样之前input框输入的内容就会被清空啦。
