数组循环后页面没有渲染_VUE简单入门基础教程（十一）渲染

在本章中，我们将学习条件渲染和列表渲染。在条件渲染中，我们将讨论有关使用if，if-else，if-else-if，show等的信息。在列表渲染中，我们将讨论如何使用for循环。

有条件的渲染

让我们开始并首先研究一个示例，以说明条件渲染的细节。使用条件渲染时，我们只希望在满足条件并且在if，if-else，if-else-if，show等帮助下完成条件检查时输出。

-

例

         VueJs Instance

Click Me {{show}}

This is h1 tag

This is h2 tag

输出量

在上面的示例中，我们创建了一个按钮和两个带有消息的h1标签。

声明了一个名为show的变量，并将其初始化为true值。显示在按钮附近。单击按钮后，我们将调用showdata方法，该方法可切换变量show的值。这意味着在单击按钮时，变量show的值将从true变为false，从false变为true。

如下面的代码片段所示，我们已将if分配给h1标签。

Click Me

This is h1 tag

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

以下是浏览器中的显示。

如果我们在浏览器中签到，这就是show为false时得到的结果。

当变量show设置为false时，将从DOM中删除h1标签。

这是当变量为true时看到的。当变量show设置为true时，会将h1标签添加回DOM。

v-else

在以下示例中，我们将v-else添加到了第二个h1标签。

例

         VueJs Instance

Click Me {{show}}

This is h1 tag

This is h2 tag

使用以下代码段添加v-else。

This is h1 tag

This is h2 tag

现在，如果show为true，则将显示“ This is h1 tag”；如果为false，则将显示“ This is h2 tag”。这就是我们将在浏览器中获得的。

上面的显示是当show变量为true时。由于我们添加了v-else，因此第二条语句不存在。现在，当我们单击按钮时，show变量将变为false，并且第二条语句将显示，如以下屏幕截图所示。

v-show

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

示例

         VueJs Instance

Click Me {{show}}

This is h1 tag

This is h2 tag

V-Show:

使用以下代码段将v-show分配给HTML元素。

V-Show:

我们使用了相同的变量show，并且基于它的true / false，图像显示在浏览器中。

现在，由于变量show为true，因此图像如上面的屏幕快照所示。让我们单击按钮并查看显示。

变量show为false，因此图像被隐藏。如果我们检查并看到该元素，则div和图像仍然是DOM的一部分，并带有style属性显示：如上图所示，没有。

列表渲染

v-for

现在让我们讨论使用v-for指令的列表呈现。

示例

         VueJs Instance

Display Fruits Name

{{a}}

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

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

我们使用v-for来显示输入的结果，如以下代码所示。V-for帮助迭代数组中存在的值。

{{a}}

要使用for循环遍历数组，我们必须使用v-for =“ a in items”，其中a保存数组中的值，并显示直到所有项目完成。

输出

以下是浏览器中的输出。

在检查项目时，这就是浏览器中显示的内容。在DOM中，我们看不到li元素的任何v-for指令。它显示没有任何VueJS指令的DOM。

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

         VueJs Instance

Display Fruits Name

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

为了获得索引，我们在方括号中添加了另一个变量，如以下代码所示。

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

在(a，index)中，a是值，而index是键。现在，浏览器显示将如以下屏幕快照所示。因此，借助索引可以显示任何特定值。