vue中v-if和v-show的对比

1,341 阅读2分钟

这是我参与8月更文挑战的第N天,活动详情查看:8月更文挑战

在我们使用vue框架开发的过程中,经常会用到vue 中的各个指令,有些指令功能效果类似,但是也与区别,v-if和v-show这两个指令就是我们开发过程当中见的最多也是使用最频繁的两个指令,因此有必要弄清楚两个指令的区别,这样可以避免不必要的bug产生,下面介绍以下v-if和v-show两个指令的区别。

v-if与v-show的区别?

共同点都是条件渲染。

在切换 v-if 块时,Vue.js 有一个局部编译/卸载过程,因为 v-if 之中的模板也可能包括数据绑定或子组件。v-if 是真实的条件渲染,因为它会确保条件块在切换当中合适地销毁与重建条件块内的事件监听器和子组件。

v-if 也是惰性的:如果在初始渲染时条件为假,则什么也不做——在条件第一次变为真时才开始局部编译(编译会被缓存起来)。

相比之下,v-show 简单得多——元素始终被编译并保留,只是简单地基于 CSS 切换。

一般来说,v-if 有更高的切换消耗而 v-show 有更高的初始渲染消耗。因此,如果需要频繁切换 v-show 较好,如果在运行时条件不大可能改变 v-if 较好。

 

使用:

v-if 可以结合v-else 和 v-else-if使用,类似于JavaScript中的if-else条件判断语句

image.png 这个时候如果disabled符合条件,将会渲染image这个标签元素

也可以结合v-else进行使用,如果不符合v-if中的条件,则将渲染v-else中的代码,如下会渲染出按钮元素

 

image.png 同理,结合v-else-if使用,只是多了判断的条件,原理是一样的。

 

v-show的使用方式和v-if的是相似的,如何条件的将被显示出来,

image.png