Vue ドキュメントの v-for ディレクティブの使用方法

Vue は、インタラクティブな Web アプリケーションを構築するための人気のある JavaScript フレームワークです。その中でも、Vue の v-for 命令は、データをループ描画するために使用される重要な命令の 1 つです。この記事では、Vue ドキュメントでの v-for ディレクティブの使用方法を紹介します。

v-for ディレクティブは、アプリケーション内で同様のデータを繰り返し表示および処理するのに役立ちます。その構文形式は次のとおりです。

v-for="(item, index) in items"

その中で、「items」はループしてレンダリングするデータ コレクションであり、配列またはオブジェクトにすることができます。ループ中に、現在処理中の項目を表すために「item」を使用し、現在の項目のインデックス値を表すために「index」を使用できます。

次は、v-for ディレクティブを使用して配列をレンダリングする例です:

<script>
export default {
  data() {
    return {
      items: ['苹果', '香蕉', '橙子']
    }
  }
}
</script>

この例では、v-for ディレクティブを使用して、3 つのリスト項目を含む順序なしリストをレンダリングします。 。ループ中に、配列内の現在の項目を表すために "item" を使用し、現在の項目のインデックス値を表すために "index" を使用します。また、「:key」ディレクティブを使用して、レンダリングされたリスト項目ごとに一意の識別子を提供します。

配列に加えて、v-for ディレクティブを使用してオブジェクトのプロパティを表示することもできます。オブジェクト プロパティをレンダリングする例を次に示します。

<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: '李雷',
        age: 30,
        location: '中国北京'
      }
    }
  }
}
</script>

この例では、オブジェクトのプロパティをレンダリングします。ループ中に、「値」を使用して現在の属性の値を表し、「キー」を使用して現在の属性の名前を表します。ここでも、「:key」ディレクティブを使用して、レンダリングされた各リスト項目に一意の識別子を提供します。

基本的なループに加えて、v-for ディレクティブは、動的レンダリングを実装するための計算プロパティとメソッドの使用もサポートしています。次に、計算プロパティを使用してデータをレンダリングする例を示します。

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

<script>
export default {
  data() {
    return {
      items: ['苹果', '香蕉', '橙子']
    }
  },
  computed: {
    computedItems() {
      return this.items.map((item) => {
        return item.toUpperCase()
      })
    }
  }
}
</script>

この例では、計算プロパティ「computedItems」を使用して、元の配列内のすべての要素が大文字に変換された新しい配列を返します。次に、v-for ディレクティブを使用して、この計算されたプロパティの値をレンダリングします。

v-for ディレクティブは、条件付きレンダリングを実装するための v-if ディレクティブの使用もサポートしています。 v-if ディレクティブを使用してデータをレンダリングする例を次に示します。

<script>
export default {
  data() {
    return {
      items: ['苹果', '香蕉', '橙子', '草莓', '西瓜']
    }
  }
}
</script>

この例では、配列の奇数の項目をレンダリングします。ループ中に、v-if 命令を使用して、現在の項目のインデックスが偶数かどうかを判断します。偶数の場合、現在の項目の値が表示されます。それ以外の場合、現在の項目は表示されません。

つまり、v-for 命令は、ループ レンダリング データの実装に使用される Vue の重要な命令の 1 つです。上記の紹介を通じて、Vue での v-for 命令の使用方法をマスターできたと思います。実際の開発では、特定の状況に応じてさまざまなループ メソッドを選択し、他の命令やコンポーネントと併用して、より柔軟で効率的な Web アプリケーションを構築できます。

以上がVue ドキュメントの v-for ディレクティブの使用方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。