v-show 与 v-if 的区别

发布时间 2023-10-07 19:52:56作者: 嘎嘎鸭2

v-show :

1.作用:控制元素显示隐藏

2.语法:v-show = "表达式"   表达式值为 true 则显示, false 则隐藏

3.底层原理:切换 css 的 display: none 来控制显示隐藏

4.使用场景:频繁切换显示隐藏的场景

 

 

v-if :

1.作用:控制元素显示隐藏(条件渲染)

2.语法:v-if = "表达式"   表达式值 true 显示, false 隐藏

3.底层原理:根据表达式的真假控制元素节点的创建和移除

4.使用场景:要么显示,要么隐藏,不频繁切换的场景