v-if和v-show的区别和以及它们在不同使 ⽤ 场景下的使用选择

67 阅读1分钟

一般来说v-if和v-show作用效果都是差不多的 ,都是使其对应的标签元素不可⻅ ,但是准确来说,二者又有一点点区别:

首先,v-if是通过对标签 元素进 创建和销毁,达到标签元素显示和隐藏的效果, ⽽v-show只是通过设置display none来控制标签的显示和隐藏 , 因为v-show在使用时只需要加载一次,所以,相对来说,v-show的性能是比v-if要好的。

其次,由于v-if是有惰性的,只有当条件为真时才会去渲染标签;如果条件不为真,则不会去渲染。而v-show⽆论初始条件是否为真,都会渲染标签,因为它只是简单的css切换。

最后,在不同的使用场景下也要注意选择,在 不需要频繁切换元素显示和隐藏的情况选择v-if,在 需要频繁切换元素的显示和隐藏的情况选择v-show