v-show和v-if指令的共同点和不同点?

相同点:v-show和v-if都能控制元素的显示和隐藏。

v-show本质就是通过设置css中的display设置为none,控制隐藏

v-if是动态的向DOM树内添加或者删除DOM元素

在初始渲染时,v-show指令不会对元素的显示和隐藏进行判断,而是直接按照CSS属性来展示;而v-if指令会在初始渲染时根据条件判断是否需要显示元素。

由于v-show指令只控制CSS属性,因此切换元素的显示和隐藏的性能较高;而v-if指令控制DOM元素的添加和移除,性能相对较低,但在条件发生变化时,v-if指令比v-show指令更适合使用。

使用场景

v-if 与 v-show 都能控制dom元素在页面的显示

v-if 相比 v-show 开销更大的(直接操作dom节点增加与删除)

如果需要非常频繁地切换,则使用 v-show 较好

如果在运行时条件很少改变,则使用 v-if 较好

你可能感兴趣的:(前端,javascript,开发语言)