Vue.js 条件渲染和 V-if 与 V-show

在本文中，我们将探讨 Vue.js 中的条件渲染，重点介绍 v-if 和 v-show 指令。这些指令用于根据条件动态渲染组件或元素，帮助开发者优化界面的显示与交互。

一. v-if 指令

功能概述

v-if 指令用于条件性地渲染一个块，只有当其表达式返回一个真值时，该块才会被渲染。适合需要在 DOM 中动态添加或移除元素的场景。

解决方案

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

<script setup>
import { ref } from 'vue' // 导入 Vue 的 ref 函数

const show = ref(true) // 创建一个响应式变量，用于控制显示
</script>

<template>
  <button @click="show = !show">切换</button> <!-- 点击按钮切换显示状态 -->
  <h1 v-if="show">Vue.js</h1> <!-- 当 show 为 true 时渲染该标题 -->
</template>

效果

在上面的代码中，点击按钮会切换 show 的值，从而控制 <h1> 标签的显示与隐藏。

二. v-else 和 v-else-if 指令

功能概述

v-else 和 v-else-if 指令用于在 v-if 的条件为假时，提供替代的渲染逻辑。可以使用多个 v-else-if 来处理多个条件。

解决方案

以下是使用 v-else 和 v-else-if 的示例：

<script setup>
import { ref } from 'vue' // 导入 Vue 的 ref 函数

const show = ref(true) // 创建一个响应式变量，用于控制显示
</script>

<template>
  <button @click="show = !show">切换</button> <!-- 点击按钮切换显示状态 -->
  <h1 v-if="show">v-if 指令</h1> <!-- 当 show 为 true 时渲染该标题 -->
  <h1 v-else>v-else 指令</h1> <!-- 当 show 为 false 时渲染该标题 -->
</template>

效果

在这个示例中，点击按钮可以切换显示 "v-if 指令" 和 "v-else 指令" 的标题。

三. v-show 指令

功能概述

v-show 指令也是用于条件性地显示元素，但与 v-if 不同的是，v-show 总是会渲染元素，并仅通过 CSS 的 display 属性来控制其显示与隐藏。

解决方案

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

<template>
  <h1 v-show="ok">Ok!</h1> <!-- 当 ok 为 true 时显示该标题 -->
</template>

效果

在上面的代码中，即使 ok 为 false，该元素依然存在于 DOM 中，只是不可见。

四. v-if 与 v-show 的对比

功能概述

v-if 和 v-show 的主要区别在于它们的渲染方式和性能表现。

• v-if 是 "真正的" 条件渲染，确保事件监听器和子组件在切换时被正确销毁和重建。
• v-show 总是渲染元素，适合频繁切换的情况，因为其开销主要在初始渲染时。

性能考量

• 当初始条件为 false 时，v-if 不会渲染任何内容，直到条件变为 true。
• v-show 在切换频繁时表现更好，但在初始渲染时可能更慢。

五. 结论

本文详细探讨了 Vue.js 中的条件渲染，通过对 v-if 和 v-show 的介绍，帮助开发者理解其功能和差异。这对于优化渲染性能和管理元素可见性至关重要。在实际开发中，根据需求选择合适的指令，可以提高应用的性能和用户体验。