一、相同点
都是控制元素的隐藏与显示
二、不同点
v-if:v-if是销毁和创建dom元素节点,在频繁的显示与隐藏时会造成性能上的浪费,所以频繁的显示与隐藏时不推荐使用v-if;值得注意的是 v-if和v-for不建议在一起使用,因为v-for的优先级比v-if要高,就意味着每次循环都要去判断,会造成大量性能资源浪费,非要使用时 可以在for循环内部添加template包裹元素 在template上进行判断;其次它还可以和v-else、v-else-if一起配合使用,但要求结构不能被“打断”(结构内不能插入其它指令)
v-show: v-show只是控制dom元素节点的显示与隐藏即在元素的css样式上设置 display值来控制元素的显示与隐藏并不会如v-if一样删除掉dom节点,适用于切换的频率较高的场景下;值得注意的是 v-show是可以和for循环是可以一起使用的, 一起使用的不会造成大量的性能浪费,只是在需要隐藏的元素上加上了 display:none 来隐藏该元素。
三、使用 v-if 时 ,元素可能无法获取到,而使用 v-show 一定可以获取到