v-show和v-if的区别

两者都是控制元素是否在页面上显示的。

<template>
    <div>
      <div id="show" v-show="isShow">v-show</div>
      <div id="if" v-if="isShow">v-if</div>
    </div>
</template>
<script>
export default {
  data() {
    return {
      isShow : true,
    }
  },
}
</script>
<style>
#show{
  width: 100px;
  height: 100px;
  background-color: darkcyan;
}
#if{
  width: 100px;
  height: 100px;
  background-color: gold;
}

区别：

v-show隐藏的时候是为元素添加cssdisplay属性为none，dom元素还存在

v-if是直接销毁dom元素

当我把isShow改为false后，第二个div直接被销毁了

所以：

如果需要频繁的切换，v-if反复销毁和重建dom元素的话会带来较高的性能消耗，因此频繁切换元素时最好使用v-show。