Vue で v-for 命令を使用して出力データをループする方法

Vue は、ビューとデータを簡単に管理するための強力なディレクティブを多数提供する人気のフロントエンド フレームワークです。最も一般的に使用される命令の 1 つは v-for で、データをループして出力できます。この記事では、Vue で v-for ディレクティブを使用してデータをループする方法を学びます。

まず、v-for の使い方を見てみましょう。基本的な構文は次のとおりです。

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

上記のコードでは、v-for 命令を使用して、list 配列内のデータをループし、出力します。 li 要素として。 v-for 命令は、v-for="(item,index) in list" の 3 つの部分で構成されます。このうち、(item,index)は定義済みの項目とインデックスであり、必要に応じて変更できます。 list は、ループされるデータ配列です。

key この属性は必須であり、一意である必要があります。この属性は、コンポーネントをより高速にレンダリングするために Vue によって DOM 要素を識別するために使用されます。 key 属性が設定されていない場合は Vue が警告を発するため、必ず key 属性を設定してください。

次に、v-for 命令を使用して Vue でデータをループアウトする方法を示す具体的な例をいくつか見てみましょう。

1. 配列を走査してリストを出力する

この例では、v-for 命令を使用して配列をループし、リストとして出力します。この例では、ES6 の拡散演算子を使用して配列を拡散します。

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

<script>
export default {
  data() {
    return {
      list: ['foo', 'bar', 'baz']
    }
  }
}
</script>

上の例では、配列を作成し、それを Vue インスタンスの data プロパティに渡しました。次に、v-for ディレクティブを使用して配列内の各項目をループし、リストとしてレンダリングします。

2. オブジェクトを走査してリストを出力する

この例では、v-for 命令を使用してオブジェクトをループし、リストとして出力します。オブジェクトのキーと値を使用してリスト項目を表示し、key プロパティをキーの名前に設定しました。

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

<script>
export default {
  data() {
    return {
      obj: {
        foo: 'Foo',
        bar: 'Bar',
        baz: 'Baz'
      }
    }
  }
}
</script>

上の例では、オブジェクトを作成し、それを Vue インスタンスの data プロパティに渡しました。次に、v-for ディレクティブを使用して、オブジェクト内の各キーと値のペアをループし、それらをリストとしてレンダリングします。

3. 数値をループしてリストを出力する

この例では、v-for 命令を使用して数値をループし、リストとして出力します。 v-for では、数値を配列にループし、配列内の項目のインデックスを使用してカウントします。

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

上の例では、v-for 命令を使用して数値を長さ 5 の配列にループし、それをリストとして出力します。インデックス変数を使用してカウントし、1 に加算してシーケンス番号を取得します。

4. 配列を走査してテーブルを出力する

この例では、v-for 命令を使用して配列をループし、HTML テーブルとして出力します。計算されたプロパティを使用して、ネストされた配列を個々のデータ項目に分割しました。

<template>
  <div>
    <table>
      <thead>
        <tr>
          <th>Name</th>
          <th>Age</th>
          <th>Gender</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in flattenedList" :key="index">
          <td>{{ item.name }}</td>
          <td>{{ item.age }}</td>
          <td>{{ item.gender }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        { name: 'Alice', age: 22, gender: 'Female' },
        { name: 'Bob', age: 25, gender: 'Male' },
        { name: 'Charlie', age: 30, gender: 'Male' },
        { name: 'Diana', age: 27, gender: 'Female' }
      ]
    }
  },
  computed: {
    flattenedList() {
      return this.list.flatMap(item => [item.name, item.age, item.gender])
    }
  }
}
</script>

上の例では、4 つのオブジェクトの配列を作成し、それを Vue インスタンスの data プロパティに渡しました。次に、それを計算プロパティに分割し、ネストされたデータ項目を単一のデータ項目に変換します。次に、v-for ディレクティブを使用して新しい配列をループし、HTML テーブルとしてレンダリングします。

概要

Vue では、v-for 命令を使用してデータをループアウトするのは非常に簡単です。基本的な構文に従うだけで、適切なデータを準備すれば、複雑なテンプレートの構築を開始できます。単純な配列を反復処理する場合でも、より複雑なネストされたデータ構造を処理する場合でも、 v-for ディレクティブはそれらの処理に役立ちます。

以上がVue で v-for 命令を使用して出力データをループする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。