Vue.js 条件 & 循环

条件和循环在所有编程语言中都用于提供重复的控制结构。它们可以根据条件重复一个或多个不同的步骤。在 Vue.js 中也是如此。

v-if 指令示例

Index.html 文件

Index.js 文件

注意：在这里，我们使用了一个简单的 CSS 文件来使输出更具吸引力。此 CSS 文件对于以下所有示例都是相同的。

Index.css 文件

输出

This is visible to you

在上面的示例中，如果输入 app3.seen = false，您将看到消息消失。

示例 2

Index.html 文件

Index.js 文件

输出

在上面的示例中，您可以看到不仅可以将数据绑定到文本和属性，还可以绑定到 DOM 的结构。 Vue 还提供了一个强大的过渡效果系统，可以在元素由 Vue 插入、更新或删除时自动应用过渡效果。

v- else-if 指令示例

我们可以使用 v- else-if 指令在上面的示例中提供 else 功能。通过使用此指令，如果条件不满足或不为真，它将返回您为程序设置的 else 语句。让我们看一个例子。

Index.html 文件

Index.js 文件

输出

You can't see me

在上面的示例中，您可以看到输出显示为“你看不到我”，它被设置为 v-else-if 语句。 Vue.js 中还有其他一些指令可用于它们自己的特殊功能。

v- for 指令示例

v-for 指令用于使用来自数组的数据显示项目列表。请参见以下示例。

Index.html 文件

Index.js 文件

输出

HTML Tutorial
CSS Tutorial
JavaScript Tutorial
AngularJS Tutorial
js Tutorial

输出

处理用户输入

v-on 指令方便用户与您的 Vue.js 应用程序进行交互。它用于附加事件侦听器，这些侦听器在 Vue 实例上调用方法。让我们看一个 v-on 指令的例子。

v-on 指令示例

Index.html 文件

Index.js 文件

输出

点击“点击此处反转消息”按钮后，上面的字符串将被反转。

在上面的示例中，app 的状态已更新，而无需触摸 DOM。所有 DOM 操作均由 Vue 本身处理。

v-model 指令示例

v-model 指令用于在表单输入和应用程序状态之间进行双向数据绑定。请参见以下示例

Index.html 文件

Index.js 文件

输出

您将在上面的示例中看到数据的自动同步。当您更改一个组件中的数据时，该更改将反映在两个组件中。请参见下面的示例

使用组件进行组合

当我们想要构建由小型、独立的且通常可重用的组件组成的大型应用程序时，将使用组件系统。大型应用程序界面可以抽象为组件树

在这里，我们使用 v-bind 指令在重复组件中传递值。请参见以下示例

Index.html 文件

Index.js 文件

输出