Vue初学08-条件指令（v-if,v-else-if,v-else）

条件判断

根据属性值的不同显示不同的结果，如下根据分数的不同显示不同的等级

    

        
一级
        
二级
        
三级
        
四级
    

    

 如果条件比较多的情况下，这样写界面要素比较多，显得比较繁琐，可以通过计算属性来实现相同的效果，如下

    

        
{{level}}
    
    

控制dom的显示

通过v-if还可以控制dom元素的显示，v-if="true"表示显示，v-if="false"表示隐藏

    

        
{{level}}
    

控制dom元素的显示，还可以通过v-show指令，v-show="true"表示显示，v-show="false"表示隐藏

   
{{level}}

 v-if="false"和v-show="false"是有区别的。

v-if="false"不会创建dom元素，如下

v-show="false"会创建dom元素，并设置display:none