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 “代表目前在循环中被重复的项目，”item “代表被遍历的数组的名称。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 “的语法循环name数组。每个元素的键被当作每个命名项目的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>

输出

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

循环浏览一个对象

例子

在这个例子中，我们将循环浏览一个由不同键值对组成的对象。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>

输出

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

用索引循环浏览数组

例子

在这个例子中，我们将在一个没有索引的数组对象中进行循环操作。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>