v-if和v-show

v-if

根据表达式的真假来切换元素的显示状态，本质是通过操纵DOM元素，表达式为true元素就存在与DOM树中，为false时从DOM树中移除

可以搭配v-else-if、v-else用

v-show

原理是修改元素的CSS属性(display)来决定实现显示还是隐藏

带有v-show的元素始终会被渲染并保留在DOM中

v-show不支持语法

<div id="add">
    <div class="box" v-if="isShow">v-if</div>
    <div class="box" v-show="isShow">v-show</div>
    <button @click="isShow = !isShow">点我</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
  var app = new Vue({
      el: "#app",
      data: {
          isShow: false
      }
  })
</script>
<style>
    .box {
        width: 200px;
        height: 200px;
        background-color: green;
    }
</style>

两者区别

1. 编译过程

v-show只是简单的CSS样式的切换，不管初始条件如何，都会被渲染出来

v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听器和子组件（‘真正’的条件渲染）；惰性的，初始条件为假时，什么都不做，直到第一次变为真时，才会开始渲染条件块

2. 性能消耗

v-if需要更高的切换消耗，涉及到条件块内各组件的重建和销毁

v-show有更高的初始渲染消耗

3. 使用场景

v-if适用于在运行时不太可能改变的情况下；不推荐同一个元素中，同时使用v-if和v-for

v-show适合频繁切换