Vue で v-for 命令を使用して出力オブジェクトをループする方法

Vue では、v-for は、配列またはオブジェクトに対してループ操作を実行するためにテンプレートで使用できる命令です。 v-for ディレクティブは、データのレンダリングをループするために使用され、Vue の非常に便利な命令の 1 つです。 Vue では、v-for 命令を使用してオブジェクトをループアウトする方法は、配列をループアウトする方法と似ていますが、わずかな違いがあります。

v-for 命令を使用して出力オブジェクトをループするにはどうすればよいですか?以下、次のパートに分けて説明していきます。

1. v-for 命令の基本的な使い方

v-for 命令の基本的な構文は次のとおりです:

<div v-for="(item,index) in items">{{ index }} - {{ item }}</div>

このうち、items は配列またはオブジェクトを表します。ループされる; item は反復される要素を表し、index は配列またはオブジェクト内の要素のインデックスを表します。

配列を例にとると、次のように配列内の要素をループアウトできます。

<div v-for="(item,index) in items">{{ index }} - {{ item }}</div>

2. 出力オブジェクト内の属性をループします

Vue では、 v -for コマンドループを使用して、オブジェクト内の属性を出力します。方法は次のとおりです:

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

このうち、object はループで出力されるオブジェクトを表し、value は出力される属性値を表します。反復; key は反復される属性名を表し、index はオブジェクト内の要素 Index を表します。

具体的な例を見てみましょう:

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

<script>
export default {
  data() {
    return {
      user: {
        name: '张三',
        age: 20,
        sex: '男'
      }
    }
  }
}
</script>

上記のコードは、ユーザー オブジェクト内の属性をループし、属性が含まれるオブジェクト内のインデックス、属性名、および属性値を出力します。位置しています。最終的な出力結果は次のとおりです:

0 - name: 张三
1 - age: 20
2 - sex: 男

3. v-for 命令を使用して属性を反復的に計算します

Vue では、v-for 命令を使用して属性を反復的に計算することもできます。これは、いくつかの特殊なアプリケーション シナリオに役立ちます。

たとえば、計算プロパティを使用して、オブジェクト内の条件を満たすすべてのプロパティを取得できます。具体的なコードは次のとおりです。

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

<script>
export default {
  data() {
    return {
      user: {
        name: '张三',
        age: 20,
        sex: '男'
      }
    }
  },
  computed: {
    filteredUser() {
      return Object.keys(this.user).reduce((result, key) => {
        if (key !== 'sex') {
          result[key] = this.user[key];
        }
        return result;
      }, {});
    }
  }
}
</script>

上記のコードは、計算されたプロパティを使用して、性別プロパティを除くユーザー オブジェクト内のすべてのプロパティを取得し、最後にこれらのプロパティをループで出力します。最終的な出力結果は次のとおりです。

0 - name: 张三
1 - age: 20

要約すると、v-for 命令を使用して出力オブジェクトをループする場合は、次の点に注意する必要があります。 v-for 命令の構文とループ出力配列も同様です。

出力オブジェクトのプロパティをループするには、v-for ディレクティブの特定の構文を使用する必要があります。
1. 計算されたプロパティを使用してオブジェクト内の条件を満たす要素を取得し、反復出力に v-for 命令を使用することもできます。

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