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

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

Vue文档中对 v-if 和 v-show 的解释：

实例：

<template>
  <div id="app">
    <div>
      <p v-if="msg === 'a'">v-if: a</p>
      <p v-else-if="msg === 'b'">v-if: b</p>
      <p v-else>other</p>

      <p v-show="msg === 'a'">v-show: a</p>
      <p v-show="msg === 'b'">v-show: b</p>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      msg: 'a'
    }
  }
}
</script>

结果：

• v-if 是根据判断条件来动态地增删DOM元素
• v-show 是根据条件判断来动态增删内联样式改变元素的显示和隐藏；

总结：

• v-if 和 v-show 的共同点和区别

  共同点：都是进行条件判断来展示视图；

  区别：v-if 是根据判断条件来动态地增删DOM元素，而 v-show 是根据条件判断来动态增删内联样式改变元素的显示和隐藏；

• v-if 和 v-show 的使用场景

  从性能来判断使用场景：

  • v-if 频繁地操作DOM会影响页面地加载速度和性能，而 v-show 只需进行css的切换，因此若需要频繁切换或更新的话，使用 v-show 更好；

  • 若并不需要频繁切换，可以一次搞定的，或者出现多种条件场景的情况下，使用 v-if 更好。