v-if和v-show的区别

v-if 和 v-show 都是Vue.js中用于条件渲染的指令，它们的作用都是根据特定的条件控制DOM元素的显示与隐藏。但在使用上有一些区别：

1. v-if：

   • v-if 是“惰性”的，当条件为假时，元素根本不会被渲染到DOM中，也就是说，如果条件为假，元素将从DOM中移除。
   • 当条件变为真时，元素会被重新创建并插入到DOM中。
   • 在条件切换频繁的情况下，使用 v-if 可以节省DOM操作，但因为涉及到DOM的创建和销毁，性能可能相对较差。

2. v-show：

   • v-show 是“静态”的，当条件为假时，元素仍然会被渲染到DOM中，只是通过样式控制其显示与隐藏。
   • 当条件变为真时，元素的样式会从 display: none 改为实际的显示样式，从而使元素可见。
   • 在条件切换频繁的情况下，使用 v-show 可以保持DOM元素的稳定，避免频繁的DOM操作，因此性能可能相对较好。

使用建议：

• 如果元素的显示与隐藏很少改变，或者在页面加载时就已经确定，推荐使用 v-if，这样可以减少DOM节点。
• 如果元素的显示与隐藏会频繁切换，推荐使用 v-show，这样可以避免频繁的DOM操作。

示例代码：

<template>
  <div>
    <!-- 使用 v-if -->
    <div v-if="isShow">
      这是通过 v-if 控制的元素
    </div>
  
    <!-- 使用 v-show -->
    <div v-show="isShow">
      这是通过 v-show 控制的元素
    </div>
  
    <!-- 切换按钮 -->
    <button @click="toggle">切换显示</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isShow: true
    };
  },
  methods: {
    toggle() {
      this.isShow = !this.isShow;
    }
  }
};
</script>

在上述示例中，我们有两个<div>元素，一个使用 v-if 控制，另一个使用 v-show 控制。toggle 方法可以切换 isShow 数据的值，从而测试两种指令的行为。