v-if和v-else-if、v-else或v-show

一、用于真正的隐藏和显示，显示时才会渲染dom元素

        v-if="布尔类型条件"：能出现n次

        v-else-if="布尔类型条件":必须与v-if搭配使用，出现n次

        v-else：必须和v-if搭配使用，只能出现1次

例子1：

效果如下：

例子二：

二、v-show="布尔类型条件"

        使用css的display来切换显示和隐藏

        显示和隐藏时都会渲染dom元素

显示效果如下：

再次点击display：none 属性添加来实现隐藏：

    
    
    


    
    

        
v-if条件渲染
        
        {{seen}}
        

        
红色块已隐藏

        
        幼儿（1-7）
        青年（7-13）
        成年人（大于18岁）
        
v-show条件渲染