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

> 原文： [https://javabeginnerstutorial.com/vue-js/7-conditional-rendering-part-1/](https://javabeginnerstutorial.com/vue-js/7-conditional-rendering-part-1/)

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

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

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

![](img/14aaafae94bb48d942bd3f553d948bfd.png)

## 1\. `v-if`指令

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

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

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

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

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

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

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

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

![v-if false condition](img/683e241dceed1bc821e64308c0558eb1.png)

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

![conditional rendering v-if](img/b81014dd6939b1699e77e2dc0eef84b9.png)

## 2\\. `v-else`指令

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

```html
<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>`标签。

![v-else true](img/7d0940f1b5db61e3875cb2e2263d9f58.png)

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

![v-else false condition](img/0f65cbd6fe9e24b6e96377776a4ac52f.png)

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

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

## 3\. `v-else-if`指令

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

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

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

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

```html
<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`并被渲染。

![v-else-if first expression](img/cb9ed33f1627c5ef3a74aed8e5c6292f.png)

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

![v-else-if second expression](img/29869b7f60d5b9f9d87511893e889e6b.png)

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

![v-else-if third condtion](img/ba1ad56b6d8ad18480db60329a7bb779.png)

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

上面讨论的所有代码都可以在 [GitHub 仓库](https://github.com/JBTAdmin/vuejs)中找到。

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