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

---

Vue JS 是一个开源的 JavaScript 框架。它用于创建单页应用程序和用户界面。Vue Js 的基于组件的架构使用称为组件的独立的可重用元素来封装 HTML、JavaScript 和 CSS。这使得能够使用虚拟 DOM 来提高性能，同时也有助于编写高效且易于维护的代码。Vue Js 的反应式系统是其区别特征之一，它允许在底层数据发生更改时立即刷新用户界面。

Vue Js 中的“v-for”指令根据循环的项目从迭代数组或对象中渲染元素。根据迭代的数据类型，有几种不同的方法来编写和使用 v-for。在 Vue.js 中有很多使用 for 循环的方法。我们将简要讨论其中三种。

• 迭代遍历数组 - 用户可以使用语法 v-for=” item in items” 迭代遍历数组，其中“item”代表当前正在循环遍历的项目，“items”代表正在迭代遍历的数组的名称。“key”指令为循环中的每个项目提供一个唯一的键，以帮助 Vue 优化渲染过程。

• 迭代遍历对象 - 要迭代遍历对象，请使用语法 v-for=” (value, key) in object”，其中“value”表示对象的当前值，“key”表示对象现有的键。“key”指令的使用方式与循环遍历数组相同。

• 使用索引循环遍历数组 - 使用语法 v-for=” (item, index) in items” 可以创建具有索引的数组循环，其中“item”表示循环中的当前项目，“index”表示当前索引。“key”指令的使用方式与循环遍历数组相同。

理论上，这三种是 Vue.js 中创建和使用 v-for 的主要方法。确切的语法和用法可能会根据正在迭代的数据类型而有所不同。但是，核心概念——根据当前循环中的项目渲染项目——保持不变。

创建 Vue JS 项目的步骤

• 通过在终端中执行以下命令来安装 Vue Js。

npm install vue 

• 安装 Vue CLI

npm install --global vue-cli 

• 要创建 Vue 项目，请运行以下命令

vue init webpack myapp 

• 导航到创建的 myapp 文件夹

cd myapp 

• 运行 Vue Js 应用程序

npm run dev 

循环遍历数组

示例

在此示例中，我们将编写和使用 Vue Js 中的 for 循环。我们将循环遍历一个包含不同名称的数组对象。“data”方法定义了一个名称列表，名称列表中的每个项目都包含一个唯一的 ID 和一个名称。我们使用 v-for 指令并使用“name in names”语法循环遍历 names 数组。每个元素的键都作为每个命名项目的 id 值。

App.vue

这是我们为本示例编写代码的主要文件。在 Vue Js 的项目结构中，它位于 src 文件夹内。

<template>
   <div>
      <h2> <i> Looping through an Array </i> in <i> Vue Js </i> </h2>
      <h4> The list is below: </h4>
      <ul>
         <li v-for="name in names" :key="name.id">
            Id: {{ name.id }} => Name: {{ name.name }}
         </li>
      </ul>
   </div>
</template>
<script>
   export default {
      data () {
         return {
            names: [
               { id: 1, name: 'ABC CBA' },
               { id: 2, name: 'XYZ ZYX' },
               { id: 3, name: 'MNO ONM' },
               { id: 4, name: 'PQR RQP' },
               { id: 5, name: 'AAA AAA' },
               { id: 6, name: 'EFG GFE' }
            ]
         }
      },
      name: 'App'
   }
</script> 

输出

循环遍历对象

示例

在此示例中，我们将循环遍历一个包含不同键值对的对象。“data”方法定义了一个名为“myObject”的对象，该对象包含键和值。我们使用 v-for 指令并使用“(value, key) in myObject”语法循环遍历该对象。

App.vue

这是我们为本示例编写代码的主要文件。在 Vue Js 的项目结构中，它位于 src 文件夹内。

<template>
   <div> 
      <h2><i>Looping through an Object</i> in <i>Vue Js</i></h2>
      <h4>The list is below:</h4>
      <ul>
         <li v-for="(value, key) in myObject" :key="key">
            {{ key }}: {{ value }}
         </li>
      </ul>
   </div>
</template>
<script>
   export default {
      data () {
         return {
            myObject: {
               key1: 'value1',
               key2: 'value2',
               key3: 'value3',
               key4: 'value4',
               key5: 'value5'
            }
         }
      },
      name: 'App'
   }
</script>

输出

使用索引循环遍历数组

示例

在此示例中，我们将循环遍历一个没有索引的数组对象。“data”方法定义了一个列表。使用 v-for 指令循环遍历数组，为“items”数组中的每个项目生成一个列表项。“key”指令为每个项目提供一个特定的键，这有助于 Vue 优化渲染过程。“index”变量用于指定循环中项目的当前索引。

App.vue

这是我们为本示例编写代码的主要文件。在 Vue Js 的项目结构中，它位于 src 文件夹内。

<template>
   <div>
      <h2><i>Looping through an Array with Index</i> in <i>Vue Js</i></h2>
      <h4>The list is below:</h4>
      <ul>
         <li v-for="(item, index) in items" :key="index">
            {{ index }}: {{ item }}
         </li>
      </ul>
   </div>
</template>
<script>
   export default {
      data () {
         return {
            items: ['item 1', 'item 2', 'item 3'],
         }
      },
      name: 'App'
   }
</script>

输出

在每个实例中都使用“v-for”指令来循环遍历提供的数组或对象，并根据循环中的项目渲染元素。根据正在迭代的数据类型，语法和用法可能会发生变化，但基本原理不会。