【Vue.js基础教程】 第6章：Vue条件渲染v-if和 v-show

Vue.js基础教程 第6章：Vue条件渲染v-if v-show

欢迎关注 『Vue.js基础入门教程』 专栏，持续更新中

在这里插入图片描述

条件渲染

在 Vue 中，条件渲染是一个非常常见的需求。比如你可能需要根据某些条件显示或隐藏页面中的一部分内容，Vue 提供了两个指令来实现这一点：v-if 和 v-show。它们看似相似，但其实有一些区别，今天我们就来详细聊聊。

v-if：真正的条件渲染

v-if 是最常用的条件渲染指令。它的工作原理很简单，只有在条件成立时，Vue 才会渲染这个元素。如果条件不成立，元素会完全从 DOM 中移除，渲染过程就不会发生。

比如这样：

<h1 v-if="isAwesome">Vue is awesome!</h1>

当 isAwesome 为 true 时，页面上会显示 Vue is awesome!；如果为 false，这段文字就完全不在页面上。

v-else：如果不是这样，那就这样

有时候你不仅要在条件成立时渲染一个元素，还需要在条件不成立时显示另外一个元素。这个时候，v-else 就派上用场了。它是 v-if 的“else”部分。

<h1 v-if="isAwesome">Vue is awesome!</h1>
<h1 v-else>Oh no 😢</h1>

当 isAwesome 为 true 时显示 Vue is awesome!，否则显示 Oh no 😢。

v-if + ：多元素渲染

有时候你可能需要根据条件渲染多个元素，但 v-if 只能作用在一个元素上，这时我们可以借助 <template>。虽然 <template> 本身不会渲染到 DOM 中，但它可以作为一个容器，包裹多个元素一起进行条件渲染。

<template v-if="isVisible">
  <h1>Title</h1>
  <p>Some text here</p>
  <button>Click me</button>
</template>

这里，<template> 只是作为容器存在，实际渲染的是其中的 <h1>、<p> 和 <button>，只有在 isVisible 为 true 时，它们才会出现在页面上。

v-else-if：多个条件

如果你有多个条件要判断，v-else-if 就非常有用了。它让你可以在一个 v-if 语句后面添加多个分支，类似于传统的 else if。

<div v-if="status === 'loading'">Loading...</div>
<div v-else-if="status === 'error'">Something went wrong!</div>
<div v-else>All good!</div>

这里根据 status 的不同值，页面会显示不同的内容。

避免复用元素：使用 key

Vue 非常聪明，它会尽量复用已经渲染过的元素，而不是每次都重新渲染。比如，当你根据不同的条件显示不同的输入框时，Vue 会保留已经输入的内容，而不是每次都重置输入框。

但如果你希望每次切换时都重新渲染元素，可以使用 key 属性来告知 Vue 这两个元素是完全独立的。

<template v-if="loginType === 'username'">
  <label>Username</label>
  <input placeholder="Enter your username" key="username-input">
</template>
<template v-else>
  <label>Email</label>
  <input placeholder="Enter your email address" key="email-input">
</template>

这样，每次切换时，Vue 会完全重新渲染输入框，保证用户输入的内容不会被保留。

v-show：快速切换

除了 v-if，Vue 还提供了 v-show 指令，它的工作方式略有不同。v-show 让元素始终保留在 DOM 中，只是通过修改 CSS 的 display 属性来控制显示和隐藏。

<h1 v-show="isVisible">Hello, Vue!</h1>

这里的 v-show 会始终渲染 <h1>，只是当 isVisible 为 false 时，元素的 display 被设置为 none，看起来像是被隐藏了。

v-if vs v-show：选择哪个？

• v-if 是真正的条件渲染，元素只有在条件为 true 时才会渲染到页面上，适合条件变化较少的情况。
• v-show 更适合频繁切换显示与隐藏的场景，因为它的渲染开销更小，只有 CSS 层面的变化。

v-if 和 v-for 一起使用：小心陷阱

最后，虽然你可以将 v-if 和 v-for 一起使用，但 Vue 官方并不推荐这样做。原因是 v-for 的优先级高于 v-if，这样会导致 v-if 的判断在每次渲染时都会重新执行，影响性能。

如果真的需要一起使用，最好将 v-if 放在 v-for 外面，避免性能问题。