Vue.js 中的 v-if 和 v-show 有什么区别？

在 Vue.js 中，v-if 和 v-show 都是用来控制元素的显示和隐藏的指令。但是，它们之间有一些区别。本文将深入探讨 v-if 和 v-show 的区别，并给出一些相关的代码示例。

在这里插入图片描述

v-if

v-if 是一种条件渲染指令，它根据表达式的值来决定是否渲染元素。如果表达式的值为 true，那么元素将被渲染；如果表达式的值为 false，那么元素将不会被渲染。

v-if 在切换时有一个特殊的特性。当条件从 false 变为 true 时，它会触发元素的销毁和重建。这意味着当条件切换时，可能会有一些性能开销。

以下是一个使用 v-if 的示例：

<template>
  <div>
    <p v-if="showMessage">{{ message }}</p>
    <button @click="toggleMessage">Toggle Message</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showMessage: true,
      message: 'Hello, World!'
    }
  },
  methods: {
    toggleMessage() {
      this.showMessage = !this.showMessage
    }
  }
}
</script>

在上面的代码中，我们使用 v-if 来控制消息的显示和隐藏。当 showMessage 的值为为 true 时，消息将被渲染出来。当我们点击按钮时，toggleMessage 方法将会被触发，从而切换 showMessage 的值。

v-show

v-show 与 v-if 类似，也是用来控制元素的显示和隐藏的指令。不同的是，v-show 只是简单地切换元素的 CSS 属性 display。如果表达式的值为 true，那么元素将显示；如果表达式的值为 false，那么元素将隐藏。

v-show 在切换时没有 v-if 那么多的性能开销。因为元素并没有被销毁和重建，只是简单地切换显示和隐藏。

以下是一个使用 v-show 的示例：

<template>
  <div>
    <p v-show="showMessage">{{ message }}</p>
    <button @click="toggleMessage">Toggle Message</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showMessage: true,
      message: 'Hello, World!'
    }
  },
  methods: {
    toggleMessage() {
      this.showMessage = !this.showMessage
    }
  }
}
</script>