Vue中的 v-if 和 v-show条件渲染

一、v-if 和v-show的共同点

1、都能控制DOM元素的显示和隐藏

二、v-if 和v-show的区别

1、v-if：为false时，动态移除不展示

      1.1：v-if 是直接将dom元素添加或者删除，是实现真正的条件渲染，它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。

       1.2：v-if由false变为true的时候，触发组件的beforeCreate、create、beforeMount、mounted钩子，由true变为false的时候触发组件的beforeDestory、destoryed方法。

2、v-show：为false时，添加css样式进行隐藏

2.1：v-show隐藏则是为该元素添加css--display:none，dom元素依旧还在。

2.2：v-show 只是基于CSS的切换，并不会触发组件的生命周期。

例如： 

v-if 是直接将展示的添加；v-show 是将所有的dom元素都保留，将不展示的采用css样式进行隐藏。

结果：一般来说，一次永久展示的采用 v-if 会更好；而如果有存在频繁进行切换展示则采用v-show更好。

 三、v-if 使用场景

1、通过条件判断展示或者隐藏某个元素/或者多个元素

2、视图之间的切换

四、v-if  和 v-else（按需展示）

<div id="app">

 <h2 v-if="false">{{message}}</h2>

  <h1 v-else>hello</h1>

</div>

v-if为true时，执行if，否则执行else。