v-if 

通过指令

Yes
No

使用<template v-if=""></template> 对多个元素进行包装

v-else

    
       Sorry
    
    
       Not sorry
    

v-else-if

    
       A
    
    
       B
    
    
       C
    
    
       Not A/B/C
    

使用 key 控制元素的可重用性

两个模版由于使用了相同的元素，<input> 会被复用，仅仅是替换了他们的 placeholder。即切换 loginType 不会删除用户已输入的内容

若不需要复用,需要单独添加key属性,key不能相同。此处输入文本后切换会删除已有的内容。<label>标签仍会复用,但不影响。

v-show

v-show 也可以根据条件展示元素。不过该元素会始终渲染并保持在 DOM中。只是简单的切换 CSS属性 display。并且不支持 <template>语法

Hello!

v-if VS v-show

v-if 在初始渲染时条件为假，则什么也不做——在条件第一次变为真时才开始局部编译（编译会被缓存起来）。v-show 元素始终被编译保留,只是简单进行 CSS 切换。

所以, v-if 有更高的切换消耗,而 v-show 有更高的初始消耗。如果需要频繁切换使用 v-show,如果运行时条件不大可能改变使用 v-if