Vue中如何使用v-for迭代數組或對象

Vue.js是一套靈活的JavaScript框架，讓開發者可以更輕鬆地建立互動式網路應用程式。在Vue中，我們可以使用v-for指令來迭代數組或物件並產生對應的HTML元素。

陣列迭代

在Vue.js中，我們可以使用v-for指令迭代數組。下面是一個簡單範例：

<template>
  <div>
    <ul>
      <li v-for="(item, index) in items" :key="index">
        {{ item }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: ["apple", "banana", "orange"],
    };
  },
};
</script>

在上面的範例中，v-for指令迭代items陣列。指令中的item和index分別代表數組中的每個元素和其在數組中的下標。注意：為了避免重複警告，我們需要使用:key屬性指定一個唯一的鍵（在這種情況下，我們使用陣列索引作為鍵）。

物件迭代

除了迭代數組，Vue.js也允許我們迭代物件。下面是一個簡單的範例：

<template>
  <div>
    <ul>
      <li v-for="(value, key) in object" :key="key">
        {{ key }}: {{ value }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      object: {
        name: "Tom",
        age: 18,
        hobby: "swimming",
      },
    };
  },
};
</script>

在上面的範例中，v-for指令迭代object物件。指令中的value和key分別代表物件中的每個值和其對應的鍵。和陣列迭代一樣，我們需要使用:key指定一個唯一的鍵（在這種情況下，我們使用物件中的鍵作為鍵）。

總結

Vue.js的v-for指令使迭代數組或物件變得更簡單。無論是在迭代數組還是物件時，我們都需要使用:key指定唯一的鍵以避免重複。

希望這篇文章對你有幫助，祝愉快編碼！

以上是Vue中如何使用v-for迭代數組或對象的詳細內容。更多資訊請關注PHP中文網其他相關文章！