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

Vue.js は非常に人気のあるフロントエンド フレームワークであり、開発者が効率的で複雑な Web アプリケーションを構築できるよう、多数の命令、コンポーネント、メソッドを提供します。その中でも、v-for は最もよく使用される命令の 1 つであり、これを使用すると、テンプレートでループ構造を使用して、オブジェクトや配列のデータを迅速かつ簡単に反復できます。以下では、v-forを使用してVueでオブジェクトや配列を反復処理する方法を詳しく紹介します。

1. 配列を反復する

Vue テンプレートでは、v-for 命令を使用して配列内のデータを反復できます。その構文形式は次のとおりです。

<div v-for="(item, index) in array" :key="item.id">{{ item.value }}-{{ index }}</div>

このうち、item は配列内の要素を表し、index は配列内の現在の要素のインデックスを表し、array は反復される配列を表します。かっこを使用して項目とインデックスを囲み、in キーワードを使用してそれらを配列名から区切ることができます。

上記の例では、:key 属性を使用して、反復される各要素に一意の識別子を指定し、Vue が再レンダリングするときのパフォーマンスも向上しました。

次のような数値を含む配列がある場合:

<script>
  export default {
    data() {
      return {
        numbers: [1, 2, 3, 4, 5]
      }
    }
  }
</script>

テンプレートで v-for を使用してそれを反復処理できます:

<ol>
  <li v-for="number in numbers" :key="number">{{ number }}</li>
</ol>

これにより、順序付けされた A リストが作成されます。ここで、各項目は配列内の数値です。

テンプレートで v-for を使用して配列をレンダリングすることに加えて、Vue の計算プロパティで配列を処理し、それをテンプレートで使用することもできます。たとえば、配列内の偶数をフィルターする計算プロパティを作成できます。

<script>
  export default {
    data() {
      return {
        numbers: [1, 2, 3, 4, 5]
      }
    },
    computed: {
      evenNumbers() {
        return this.numbers.filter((number) => number % 2 === 0)
      }
    }
  }
</script>

<ol>
  <li v-for="number in evenNumbers" :key="number">{{ number }}</li>
</ol>

これにより、配列内の偶数のみを表示するリストが作成されます。

2. オブジェクトの反復

配列と同様に、Vue では v-for を使用してオブジェクト内のプロパティを反復することもできます。その構文形式は次のとおりです。

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

このうち、value はオブジェクト内の属性の値を表し、key は属性の名前を表し、object は反復されるオブジェクトを表します。

次のようなユーザー情報を含むオブジェクトがある場合:

<script>
  export default {
    data() {
      return {
        user: {
          name: 'Alice',
          age: 30,
          email: 'alice@example.com'
        }
      }
    }
  }
</script>

v-for を使用してそれを反復処理し、その中のプロパティをレンダリングできます:

<dl>
  <dt>User info</dt>
  <dd v-for="(value, key) in user" :key="key">{{ key }}: {{ value }}</dd>
</dl>

これにより、各語句が属性の名前とその値を表示する定義のリスト。

テンプレートで v-for を使用してオブジェクトをレンダリングすることに加えて、Vue の計算プロパティでオブジェクトを処理して、それらをテンプレートで使用することもできます。たとえば、ユーザーが 25 歳以上のプロパティを除外する計算プロパティを作成できます。

<script>
  export default {
    data() {
      return {
        user: {
          name: 'Alice',
          age: 30,
          email: 'alice@example.com'
        }
      }
    },
    computed: {
      ageOver25() {
        return Object.keys(this.user)
          .filter((key) => key === 'age' ? this.user[key] > 25 : true)
          .reduce((obj, key) => {
            obj[key] = this.user[key]
            return obj
          }, {})
      }
    }
  }
</script>

<dl>
  <dt>User info (age over 25)</dt>
  <dd v-for="(value, key) in ageOver25" :key="key">{{ key }}: {{ value }}</dd>
</dl>

これにより、ユーザーが 25 歳以上のプロパティのみを表示する定義リストが作成されます。

概要

v-for は Vue で非常に一般的に使用される命令で、テンプレート内でループ構造を使用して、配列やオブジェクト内のデータを迅速かつ簡単に反復処理できます。実際の開発では、リストやテーブルなどのデータ構造を動的に描画するために v-for を頻繁に使用するため、v-for を使いこなすことが非常に重要です。

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