Vue的v-if和v-show的区别(含图示)

一、v-if和v-show区别
v-show严格意义来说其实是条件隐藏,直接在页面初始化的时候将DOM(对象模型)元素也初始化,因为它就是将它所在的元素添加一个display属性为none,如果条件符合就显示。
a. 文本框中无内容,默认为false,所以属性显示
Vue的v-if和v-show的区别(含图示)_第1张图片
b. 文本框中输入d,false变为ture,属性消除
Vue的v-if和v-show的区别(含图示)_第2张图片

v-if严格意义来说就是条件判断,符合就加载DOM(对象模型)元素,不符合就不显示。

a. 文本框中无内容时,不加载
Vue的v-if和v-show的区别(含图示)_第3张图片

b. 文本框中输入d,加载DOM
Vue的v-if和v-show的区别(含图示)_第4张图片

二、生命周期
v-if切换一次就要重新走一次生命周期,比如说重新构建内部事件和函数,而v-show则就是页面初始时走一遍生命周期,将其加载完毕,其他时候则都不会走相关的周期了。

三、性能的差异
v-if更高的切换性能,比如说需要判断多个条件时,就使用if
② 如果需要频繁的切换,选择v-show,因为show是动态的改变样式,不需要增删DOM(对象模型)元素,大项目推荐使用show,能极大减少浏览器后期的操作性能。
show不支持