Vue.js条件判断（v-if 和 v-show）

条件判断

1. v-if

1.1 v-if 和 v-else

条件判断使用 v-if 指令：
随机生成一个数字，判断是否大于0.5，然后输出对应信息：

    

      大于5
    
    

      小于5
    

    

注意：v-if 可以配合v-else使用，也可以单独使用 。当配合v-else使用时，加有v-else的标签要紧跟加有v-if的标签之后，中间如果穿插其他标签，v-else将永远不会显示出来，并会报错！
如果v-if后面跟的是布尔值，而非变量语句的时候，可以根据布尔值真假判断显示和不显示 ，舍弃v-else 用v-if="flag" 配合 v-if="!flag"来解决中间不可以穿插其他标签的问题，可见v-if 配合v-else使用非常有局限性！

1.2 v-if 和 v-else-if

v-else-if 在 2.1.0 新增，顾名思义，用作 v-if 的 else-if 块。可以链式的多次使用：
判断 type 变量的值：

    

      A
    
    

      B
    
    

      C
    
    

      Not A/B/C
    

    

输出C，同上v-else 、v-else-if 必须跟在 v-if 或者 v-else-if之后。

2. v-show

    
    
    
    
    


    


        
        
hello
 
    

v-if和v-show的区别：

v-if底层控制的是节点的添加和删除，v-if一旦为假，带有v-if 的标签将不复存在，而v-show底层控制的是标签样式的显示和隐藏，并不会删除标签节点！