vue v-if 和v-show的区别和使用场景

相同点：两者都是用来操作页面上元素的显示和隐藏 

不同点：

• vue-if 是动态的向DOM树内添加或者删除DOM元素
• vue-show 是使用到元素的display样式设置为 none 隐藏，设置成 block 显示
• 编译方式：
  • v-if 是在条件为 true 的时候才编译进行渲染的，如果第一次为 false 就直接跳过
  • v-show 判断无论是否是 true 或者 false，都会被编译。然后DOM会被保留。后面有改变时再对元素的样式进行变化

使用场景：

　　如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。