实现显示隐藏的方式不同
- v-if 显示隐藏是将 dom 元素整个添加或删除
- v-show 显示隐藏则是在该元素的 行内 css 样式中 对 display 属性值的切换操作,即:当 v-show 的值为 false 时,设置 display:none;当 v-show 的值为 true 时,将 display 的属性值设置为空或者初始值(本身已经设置过的display属性值)
编译的条件不同
- v-if:惰性的,只有在条件为真时,才开始编译,否则,什么也不会做
- v-show:在任何条件下都会被编译
当一个元素本身已经设置了 display:none 时,通过 v-show 修改为 true 是无法让元素显示的。原因是 v-show 的显示隐藏切换,是通过是否设置 display:none 来实现。而当v-show为true时,由于原始的display的值为none ,因此,设置行内样式时,display设置为空,不会覆盖初始设置的样式
出于性能考虑,应避免将 v-if 与 v-for 应用于同一标签 ---- v-for比v-if的优先级要高,结合两者编译的问题,应该先在父元素中使用v-if,再在子元素使用v-for