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

    
     hello world!
    
    
    
     bye world!
    
复制代码

v-else 要紧贴着 v-if 使用

v-else-if

    
     This is A
    
     
    
     This is B
    
        
    
     This is C
    
 复制代码

v-if ,v-else-if, v-else 这三个指令要紧贴着使用，中间不能被其他标签所分隔。

    
     用户名：
     
    
         
    
     邮箱名：
     
    
 复制代码

当vm.$data.show 从 true 修改为false ，dom也会进行相应的修改

当时input输入框并没有清空，因为Vue在重新渲染界面的时候会尽量地去复用页面上已经存在的dom。（复用机制），那如何解决呢？

我们可以给每个input 添加一个  key 值。

    
     用户名：
     
    
         
    
     邮箱名：
     
    
 复制代码

当你给每个标签加上key值后，vue就不会复用两个不同的标签了。这样之前input框输入的内容就会被清空啦。