Vue で v-for を使用して配列またはオブジェクトを反復する方法

Vue.js は、開発者がインタラクティブな Web アプリケーションをより簡単に構築できるようにする柔軟な 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 配列を反復処理します。命令内の項目とインデックスは、それぞれ配列内の各要素と配列内のその添字を表します。注: 重複した警告を回避するには、: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 オブジェクトを反復します。命令内の値とキーは、それぞれオブジェクト内の各値とそれに対応するキーを表します。配列の反復と同様に、:key を使用して一意のキーを指定する必要があります (この場合、オブジェクト内のキーをキーとして使用します)。

概要

Vue.js の v-for ディレクティブを使用すると、配列またはオブジェクトの反復処理が簡単になります。配列を反復処理する場合でも、オブジェクトを反復処理する場合でも、重複を避けるために :key を使用して一意のキーを指定する必要があります。

この記事がお役に立てば幸いです。コーディングを楽しんでください。

以上がVue で v-for を使用して配列またはオブジェクトを反復する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。