还在纠结什么时候用v-if和v-show吗

tech2022-09-22  84

vue中的 v-if 和 v-show 二者都可以动态的控制元素的隐藏和显示,但是他们控制的原理是不同的。

v-if原理

v-if控制元素显示或者隐藏是把整个dom元素整个地渲染或者删除,如果删除元素,也就是说页面中不存在这个dom元素,从而达到隐藏的效果;v-if每次切换的时候都会创建或者销毁元素,有较高的切换性能消耗v-if是惰性的,如果在初始条件为假的情况下什么也不会做,直到第一次条件为真的时候才会渲染条件块

v-show原理

v-show无论初始条件是什么,元素都会被渲染,也就是说dom元素始终是存在的,只是通过控制css的display属性来控制显示或隐藏拥有比较高的初始渲染消耗

使用场景

如果元素需要频繁切换的话推荐使用v-show如果很少切换,或者元素永远不切换的话就用v-if
最新回复(0)