VUE 条件渲染 v-if、v-show

VUE 条件渲染 v-if、v-show

条件指令

• v-if 是否渲染当前元素
• v-else
• v-else-if
• v-show：与 v-if 类似，只是元素始终被渲染并保留在DOM中，只是简单的切换CSS属性display来显示或者隐藏。

    
    
    
    


    

        
v-if 条件渲染
        勾选后显示红色小块
        

        
红色小块隐藏了...
        

        
v-show 条件渲染
        

    
    
    

v-if 和 v-show的比较

1. 什么时候元素被渲染：
   - v-if 如果在初始条件为假，则什么也不做，每当条件为真时，都会重新渲染条件元素。
   - v-show 不管初始条件是什么，元素总是被渲染，并且只是简单的基于CSS样式进行切换。

2. 使用场景选择：
   - v-if 有更高的切换开销
   - v-show 有更高的渲染开销
   因此，如果需要非常频繁的切换，则使用 v-show 比较好，如果在运行后，条件很少改变，则使用 v-if 比较好。

源码位置：https://gitee.com/wjw1014/vue_learning_course