如何在 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”指令來迴圈遍歷提供的陣列或物件，並根據迴圈中的專案渲染元素。根據正在迭代的資料型別，語法和用法可能會發生變化，但基本原理不會。