v-show与v-if 的区别

在vue中v-show和v-if都能够控制DOM元素的显示，如下实例：

  <div id="app">
    <h2 v-show="isShow" id="v-show">{{message}}</h2>
    <h2 v-if="isShow" id="v-if">{{message}}</h2>
  </div>
  <script src="../js/vue.js"></script>
  <script>
  const app = new Vue({
    el:'#app',
    data:{
      message:'小鱼儿',
      isShow:true
    }
  })
  </script>

由上面的案例可以看出：v-show是通过设置元素的样式style= '' display: none;''来隐藏显示，而包含v-if = "false"指令的元素根本不会在DOM中创建，当v-if在true和false之间进行切换时，相应的元素会进行创建和销毁。

在开发过程中：

当需要在显示与隐藏之间切换很频繁时，使用v-show;

当只需要切换一次时，使用v-if。