vuev-if和v-show的区别

Posted 2021-01-25 lyx183

今天来捋一下vue中的v-if与v-show的区别

1. 先来看一下vue官方文档对他们的解释

　　2.从实现方式来看：

　　　　v-if是当依赖的值变为false时，直接让元素消失，html代码也会消失，相当于直接在DOM树上把此节点删除了，

　　　　　　而当值为true时，页面会重新渲染div;，也就是从新创建了DOM节点

　　　　v-show是基于css切换来实现元素的显示和隐藏，即只是将元素css属性设为了display:none 或display:block

 

 

　　3.使用场景:

　　　　由于v-if是惰性的，如果初始渲染时条件为假，则什么也不做；只有在条件第一次变为真时才开始渲染，

　　　　v-if有更高的切换开销，而v-show有更高的初始渲染开销

　　　　因此我们常把v-if用于条件改变不频繁的场景，将v-show用于频繁切换的场景

 

　　4.v-else和v-else-if

　　　　可以用v-else来表示 v-if 的else 块，（v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。）

　　　　可以用v-else-if充当else if模块。可以连续使用（类似于 v-else，v-else-if 也必须紧跟在带 v-if 或者 v-else-if 的元素之后。）