v-if

v-if是一个指令，需要添加在元素上使用。可以与v-else、v-else-if配套使用，v-else、v-else-if必须跟在v-if、v-else-if之后。例如：

    
       A
    
    
       B
    
    
       C
    
    
       Not A/B/C
    

想要多个元素切换时，可以用template标签包裹起来，并在template标签上使用v-if指令，最终渲染出来不会有template标签。

v-if会复用已有的元素

为了高效的渲染元素，v-if会复用已有元素而不是从头开始渲染。例如：

当在input中输入文字，再切换到email登陆时，输入框中的值不回清空，因为元素没有重新渲染，然是仅仅改变了placeholder中的值。同样label标签也没有重新渲染，然是仅仅改变了label中的文本。

想要元素不被复用时，只需要在元素中添加key值即可，如下：

此时input不会被复用，label仍被复用。

v-show

v-show和v-if使用方法一样，作为一个指令使用。 可是v-show控制的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS 属性 display，在条件不成立时display属性为none。v-show 不支持 template 语法。

v-if 和 v-show的区别

• v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
• v-if 也是惰性的，如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块；v-show不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。
• v-if 切换开销更高，而 v-show 的初始渲染开销更高。