如何在 Vue js 中编写和使用 for 循环？

< Vue.js是 ReactJS 等 JavaScript 的最佳框架之一。 VueJS 用于设计用户界面层，任何开发人员都很容易上手。它也与其他库和扩展兼容。如果你想创建一个单页应用程序，那么我认为 VueJS 是首选。在开发领域，可能有很多问题是使用单个库无法解决的，所以 VueJS 与其他库兼容，因此您可以轻松实现。所有流行的浏览器都支持 VueJS，例如 Chrome、Firefox、IE、Safari 等。您可以轻松地将这个库与您喜欢的库进行比较。

VueJS 中的循环概念有助于在某些条件评估为真时重复执行一组指令。为了在固定的时间内重复一项任务，我们使用了for 循环。有多种使用 for 循环的方法，如下所示：

• 为每一行使用键：遍历的每一行的唯一标识符
• 在一个范围内 for 循环：循环通过定义的开始和结束索引。
• 使用 v-if 定义条件：仅在特定条件下运行循环。
• 使用过滤器计算数据：在运行 for 循环之前删除某些数据。
• 在每次遍历中使用索引：在每个循环周期中访问索引以及数据。

句法：

    {{item}}

方法：在这里，我们将创建一个 Vue 项目，然后我们将创建一个使用for循环的不同 UI。

创建 Vue 项目：

第 1 步：要创建 Vue 应用程序，您需要使用此 npm 命令安装 Vue 模块。您需要确保之前已安装该节点。

npm install vue

第 2 步：通过 CLI 使用 VueJS。打开终端或命令提示符并运行以下命令。

npm install --global vue-cli

第 3 步：运行以下命令以创建项目。

vue init webpack myproject

第 4 步：创建 Vue 项目后，移入文件夹以执行不同的操作。

cd myproject

运行应用程序的步骤：打开终端并键入以下命令。

npm run dev

打开浏览器。打开一个运行 localhost 的选项卡 (http://localhost:8080/)，您可以看到图像中显示的输出。

项目结构：运行上述步骤中提到的命令后，如果您在编辑器中打开项目，您可以看到类似的项目结构，如下图所示。新组件的用户所做的或我们将要执行的代码更改将在源文件夹中完成。

项目结构

循环范围（1-10）：

示例 1：我们将创建一个运行循环以显示数字列表的 UI。

应用程序.vue：

Javascript

    export default {
        name: 'App',
    }

输出：

乘法表

用键循环：

示例 2 ：我们将创建一个循环运行的 UI，每行都有一个键。

应用程序.vue：

Javascript

  

  export default {
    name: 'App',
    data () {
      return {
        data_structures: [ 'Array', 'Linked-list', 'Stack',
        'Queue', 'Heap', 'Tree']
      }
    }
  }

输出：

数据结构列表

使用索引和数据循环：

示例 3：在此示例中，我们将创建一个 UI，该 UI 运行一个循环以显示数据列表和索引。

Javascript

  

  export default {
    name: 'App',
    data () {
      return {
        frameworks: [ 'React', 'Vue', 'Angular',
        'Meteor', 'Ember', 'React Native']
      }
    }
  }

输出：

JS 框架列表