v-if能实现的功能v-show不一定能实现

116 阅读1分钟

学习之初,对v-if和v-show的区别认知仅仅停留在效率层面,后知后觉,在某些场景下,v-if能实现的功能是v-show不可替代的。

v-if

在dom元素不显示时会删除此元素,显示时重新创建dom对象,切换显隐时会不断地对dom元素进行创建删除,更适用于切换不频繁时

v-show

显示与否实际上是改变dom元素的display属性值,隐藏时页面上看不到也不占位,但dom元素还是真实存在,更适用于频繁
切换显隐时

功能实现区别

做表单整体校验的时候,如果其中的某一项是有些情况显示 有些情况不显示,如果使用v-show,确实实现了dom在页面的隐藏,
但是这一项的dom还是存在,并且的值是空(因为页面不显示所以此项未被用户填写),所以整体校验的时候也会对这一项进行校
验,导致页面信息填写完整的情况下整体校验仍然永远校验失败,但换成v-if就把这个dom元素删除了,就不会校验到这一项了,
整体校验就可以正常进行了