介绍

之前一段时间由于工作很忙，没有时间继续学习Vue，今天算是继续对之前的学习进行补充了，今天要学习的便是Vue的条件渲染和列表渲染，我们将讨论if、if-else、if-else-if，show等。在列表渲染中，我们将讨论如何使用for循环。

---

---

条件渲染

对于条件渲染，其概念就是满足条件的渲染界面输出，在Vue中借助if，if-else，if-else-if，show等的帮助下完成条件检查,我们首先通过一个实例来解释条件渲染的细节

---

---

浏览器效果

---

---

在上面的例子中，我们创建了一个按钮和两个带有消息的h1标签。声明了一个名为show的变量，并将其初始化为值true。它显示在按钮附近。在单击按钮时，我们调用方法showdata，它切换变量show的值。这意味着在单击按钮时，变量show的值将从true变为false，false变为true。我们已将if分配给h1标记，如以下代码段所示。

Click Me

这是H1标签

---

现在它将做的是，它将检查变量show的值，如果它是真的，将显示h1标签。单击按钮并在浏览器中查看，因为show变量的值更改为false，h1标记不会显示在浏览器中。仅在show变量为true时显示。

以下是浏览器中的显示。

---

---

我们看下浏览器中dom的变化情况

---

---

变为false时，h1已经不见了

---

---

下面是使用了if-else的示例

---

---

主要就是这段代码：

这是H1标签

这是H2标签

---

现在，如果show为true，将显示“这是H1标签”，如果为false，则显示“这是H2标签”。这是我们将在浏览器中获得的内容。

---

---

点击按钮后变化

---

---

接下来是v-show的示例

---

---

v-show的行为与v-if相同。它还根据分配给它的条件显示和隐藏元素。v-if和v-show之间的区别在于v-if如果条件为false则从DOM中删除HTML元素，如果条件为真则将其添加回来。而v-show隐藏了元素，如果条件为false，则display：none。如果条件为真，它会显示元素返回。因此，元素始终存在于dom中。

列表渲染

• v-for

现在让我们使用v-for指令进行列表渲染

---

---

名为items的变量声明为数组。在方法中，有一个名为showinputvalue的方法，它被分配给带有水果名称的输入框。在该方法中，使用以下代码将输入文本框内的水果添加到数组中

showinputvalue : function(event) { this.items.push(event.target.value);}

---

我们使用v-for来显示输入的水果，如下面的代码片段所示。V-for迭代数组中存在的值。

• {{a}}

---

要使用for循环迭代数组，我们必须使用v-for = "a in items"，其中a保存数组中的值并显示直到所有项都完成。我们看下浏览器输出：

---

---

尝试输入一些水果名称：

---

---

Dom代码对比

---

---

如果我们希望显示数组的索引，则使用以下代码完成：

---

---

主要代码如下

{{index}}--{{a}}

---

浏览器效果如下

---

---

总结

以上就是对Vue中的条件渲染和列表渲染的介绍，非常的简单，但是越是简单的东西越是要打捞基础，就像是学习编程语言的语法一样，希望对和我一样初学Vue的小伙伴有一些帮助，共同进步！

---

---