Vue入门-指令学习-v-show和v-if

v-show：

作用：控制元素的显示隐藏

语法：v-show="表达式" 表达式值true显示，false隐藏

v-if

作用：控制元素的显示隐藏（条件渲染）

语法： v=if="表达式" 表达式true显示，false隐藏

注意：

v-show和v-if效果上一样，但是底层原理不同，v-show是通过切换css的display：none属性来显示隐藏，而v-if则是根据判断条件控制元素的创建和移除

v-show更适合需要频繁切换显示隐藏场景的情况

v-if更适合条件渲染

使用demo描述

demo：

参数全为true

    
    
    

    
    



    

        
v-show控制的盒子
        
v-if控制的盒子
    

    

    

页面效果：

v-show和v-if全部都显示

页面检查中能看到俩条对应的代码

v-show控制的盒子
v-if控制的盒子

将true改成false后的页面效果

页面检查中只能看到v-show的代码，看不到v-if的代码

v-show控制的盒子