7 条件渲染第 1 部分（v-if，v-else，v-else-if）

原文： https://javabeginnerstutorial.com/vue-js/7-conditional-rendering-part-1/

我们并不总是希望将所有内容呈现到我们的网页上。根据特定条件或特定表达式的值，我们可能希望隐藏/显示/附加或分离元素。这只不过是条件渲染 – 基于条件渲染元素。这可以使用简单的if-else语句来实现。但是，我们将如何使用 Vue？现在就纠正一下吧！

Vue 指令再来一次！在这方面，我们有v-if，v-else和v-else-if来帮助我们。让我们逐一查看示例，以进行深入了解。我将撒很多视觉效果以简化此过程。

首先，让我们有两个带有一些文本的段落标签，

1. v-if指令

使用v-if指令的语法如下：

<HTML-tag v-if=”condition or expression that evaluates to true or false”>

如果条件为真/求值为真，则将渲染标签。

让我们向 Vue 实例的数据对象添加display属性，并为其赋予false值。

data: { message: "Hi", display: false }

现在，将v-if指令添加到第一段标签中，并指定display条件，基于该条件，将不显示标签。

<p v-if="display">Display evaluates to true</p>

由于display的值现在设置为false，因此不会呈现带有文本“显示求值为真”的第一个<p>标签。

将display值更改为true将呈现第一个<p>标签的内容。

假设您要在显示为true时显示第一个<p>标签，并在显示结果为false时显示第二个<p>标签。在这种情况下，我们可以使用v-else指令。它类似于else块。

<p v-if="display">Display evaluates to true</p> 
<p v-else>You always get to see me :)</p>

将display设为true时，将在v-if指令的条件求值为true的情况下呈现第一个<p>标签。

将display更改为false只会使用v-else伪指令呈现第二个<p>标签，如下所示，

注意： 具有v-else指令的 HTML 元素必须紧随具有v-if的元素。否则，v-else元素将不会被识别。换句话说，不要在v-if元素和v-else元素之间添加任何元素。

可以在<div>，<template>等帮助下将这些指令添加到单个 HTML 元素或元素块中。考虑一种情况，您希望根据条件显示错误消息。在这种情况下if-else块会派上用场。

它也与v-if元素一起使用。该指令充当“else-if”条件。与其他任何编程语言一样，它可以链接多次。

让我们向数据对象添加val属性，并为其提供数值。

data: { message: "Hi", val: 5 }

将v-if，v-else-if和v-else伪指令添加到三个<p>标签并添加条件。

<p v-if="val < 10">Val is less than 10</p> 
<p v-else-if="val > 10 && val < 20">val is between 10 and 20</p> 
<p v-else>Pretty high val!!</p>

现在，让我们更改val属性的值，并查看输出如何变化。

首先，将val设为5。由于它小于 10，因此v-if条件求值为true并被渲染。

现在将val更改为15。 v-else-if条件求值为true，并将其呈现到 DOM，如下所示。

将val更改为90会使v-if和v-else-if表达式均求值为false。因此，将渲染v-else元素。

注意： 与v-else相似，带有v-else-if指令的元素必须紧随带有v-if或v-else-if的元素。否则，将无法识别。

上面讨论的所有代码都可以在 GitHub 仓库中找到。

是时候戴上开发人员的帽子，并尝试使用这些指令了！祝你今天愉快。