本文共 635 字，大约阅读时间需要 2 分钟。

目录

1. v-show指令

• 作用：根据表达值的真假，切换元素的显示和隐藏
• 本质：修改元素的display，实现显示隐藏
• 说明：指令后面的内容，最终都会解析为布尔值，值为true元素显示，值为false元素隐藏

  完整代码

2. v-if 指令

• 作用：根据表达式的真假切换元素的显示状态
• 本质：通过操纵dom元素来切换显示状态
• 说明：表达式的值为true，元素存在于dom树中，为false，从dom树中移除

    
       
           
   
        
            
            
    
大家好，我是测试小白！
        
            
    
大家好，我是测试小白！
        
            
            
    
恭喜你脱单了，哈哈哈哈！
    
   
    
           

3. 总结

• v-show和v-if根据表达式的真假切换元素的显示状态
• v-show修改display；v-if操作Dom树，性能消耗大
• 元素频繁操作显示隐藏时，建议使用v-show