Vue条件渲染 v-if，v-else-if，v-else，v-show

1 v-if指令

1.1 v-if：根据表达式的布尔值判断是否插入标签 

v-if指令，当show为true时显示div内容，当show为false时隐藏div内容   

        
hello wirld
        toggle
        
    

展示

1.2  v-else v-else-if

   v-else紧跟在v-if或v-else-if之后

   v-else-if紧跟在v-if或v-else-if之后

如下例：

    
This is A
    
This is B
    
This is others

 结果：

1.3 使用key值管理可复用的元素

以下两个实例展示了不使用key值与使用key值的区别

实例：不使用key值
    
    

        用户名： 
    
    

        邮箱名： 
    
    

     切换
    

 结果展示：

 

实例：使用key值 
   
    

        用户名： 
    
    

        邮箱名： 
    
    

     切换
    

结果展示： 

 

2、v-show  

 根据表达式的布尔值判断是否显示标签 

v-show指令

        
hello wirld
        toggle       
    
    

 

 

3、v-if和v-show的区别：

v- else-if

v-else

1. v-if通过删除和添加标签实现标签的隐藏和显示
2. v-show通过设置标签的display属性来实现标签的隐藏和显示