Rendu conditionnel

La directive v-if est utilisée pour restituer conditionnellement un bloc de contenu. Ce contenu ne sera rendu que si l'expression de la directive renvoie une valeur véridique.

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

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

v-if

v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 truthy 值的时候被渲染。

<template v-if="ok">
  <h1>Title</h1>
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
</template>

也可以用 v-else 添加一个“else 块”：

<div v-if="Math.random() > 0.5">
  Now you see me
</div>
<div v-else>
  Now you don't
</div>

在 <template> 元素上使用 v-if 条件渲染分组

因为 v-if 是一个指令，所以必须将它添加到一个元素上。但是如果想切换多个元素呢？此时可以把一个 <template> 元素当做不可见的包裹元素，并在上面使用 v-if。最终的渲染结果将不包含 <template> 元素。

<div v-if="type === 'A'">
  A
</div>
<div v-else-if="type === 'B'">
  B
</div>
<div v-else-if="type === 'C'">
  C
</div>
<div v-else>
  Not A/B/C
</div>

v-else

你可以使用 v-else 指令来表示 v-if 的“else 块”：

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

v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。

v-else-if

2.1.0 新增

v-else-if，顾名思义，充当 v-if 的“else-if 块”，可以连续使用：

<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>

类似于 v-else，v-else-if 也必须紧跟在带 v-if 或者 v-else-if 的元素之后。

用 key

< strong>Utilisez le regroupement de rendu conditionnel v-if sur l'élément <template>

<h1 v-show="ok">Hello!</h1>

v-else🎜🎜🎜🎜Vous pouvez utiliser v- Directive else pour représenter le "bloc else" de v-if : 🎜rrreee🎜 L'élément v-else doit être immédiatement suivi de v-if ou v-else - l'élément if, sinon il ne sera pas reconnu. 🎜🎜🎜🎜

v-else-if🎜🎜

🎜2.1.0 Ajout de 🎜

🎜v-else-if, comme son nom l'indique, agit comme le "bloc else-if" de v-if et peut être utilisé en continu : 🎜rrreee🎜Similaire Pour v-else, v-else-if doit également être suivi immédiatement de v-if ou v -else-if< /code> après l'élément. 🎜🎜🎜🎜

Utilisez la key pour gérer les éléments réutilisables 🎜🎜🎜🎜Vue fera de son mieux Peut restituer des éléments de manière efficace, souvent en réutilisant des éléments existants plutôt qu'en les restituant à partir de zéro. En plus de rendre Vue très rapide, cela présente plusieurs autres avantages. Par exemple, si vous autorisez les utilisateurs à basculer entre différentes méthodes de connexion : 🎜rrreee

Donc, changer de loginType dans le code ci-dessus n'effacera pas ce que l'utilisateur a saisi. Étant donné que les deux modèles utilisent le même élément, <input> n'est pas remplacé : seul son placeholder est remplacé. loginType 将不会清除用户已经输入的内容。因为两个模板使用了相同的元素，<input> 不会被替换掉——仅仅是替换了它的 placeholder。

自己动手试一试，在输入框中输入一些文本，然后按下切换按钮：

这样也不总是符合实际需求，所以 Vue 为你提供了一种方式来表达“这两个元素是完全独立的，不要复用它们”。只需添加一个具有唯一值的 key 属性即可：

rrreee

现在，每次切换时，输入框都将被重新渲染。请看：

注意，<label> 元素仍然会被高效地复用，因为它们没有添加 key 属性。

v-show

---

另一个用于根据条件展示元素的选项是 v-show 指令。用法大致一样：

rrreee

不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS 属性 display。

注意，v-show 不支持 <template> 元素，也不支持 v-else。

v-if vs v-show

---

v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。

v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。

相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。

一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if

Essayez-le vous-même, entrez du texte dans la zone de saisie et appuyez sur le bouton bascule : 🎜🎜🎜🎜Cela ne répond pas toujours aux besoins réels, Vue vous propose donc un moyen d'exprimer "Ces deux éléments sont complètement indépendants, ne les réutilisez pas ". Ajoutez simplement un attribut key avec une valeur unique : 🎜rrreee🎜Maintenant, la zone de saisie sera restituée à chaque fois qu'elle change. Veuillez consulter : 🎜🎜 🎜🎜Notez que les éléments <label> seront toujours réutilisés efficacement car ils n'ont pas l'attribut key ajouté. 🎜🎜🎜🎜

v-show

---

🎜Une autre option pour afficher des éléments de manière conditionnelle est la directive v-show. L'utilisation est à peu près la même : 🎜🎜rrreee🎜La différence est que les éléments avec v-show seront toujours rendus et resteront dans le DOM. v-show change simplement la propriété CSS de l'élément display. 🎜

🎜Notez que v-show ne prend pas en charge l'élément <template>, ni v-else. 🎜

🎜🎜🎜

v-if contre v-show

---

🎜v-if est un "vrai" rendu conditionnel, car il garantit que les écouteurs d'événements et les sous-composants du bloc conditionnel sont détruits et recréés de manière appropriée pendant le changement. 🎜🎜🎜v-if est également paresseux : si la condition est fausse lors du rendu initial, rien n'est fait - le bloc conditionnel ne sera rendu qu'à la première fois que la condition devient vraie. 🎜🎜En comparaison, v-show est beaucoup plus simple : l'élément sera toujours rendu quelles que soient les conditions initiales, et il est simplement activé en fonction du CSS. 🎜🎜De manière générale, v-if a une surcharge de commutation plus élevée, tandis que v-show a une surcharge de rendu initiale plus élevée. Par conséquent, si vous devez changer très fréquemment, il est préférable d'utiliser v-show ; si les conditions changent rarement au moment de l'exécution, il est préférable d'utiliser v-if ; 🎜🎜🎜🎜

v-if 与 v-for 一起使用

---

不推荐同时使用 v-if 和 v-for。请查阅 风格指南 以获取更多信息。

当 v-if 与 v-for 一起使用时，v-for 具有比 v-if Priorité plus élevée. Veuillez consulter le Guide de rendu de liste pour plus de détails.