Vueでのforループの使い方

Vue の for ループは、配列またはオブジェクトを走査するために使用できます。v-for ディレクティブと v-for range 属性の 2 つの構文があります。 v-for ディレクティブは item エイリアスを使用して現在の要素にアクセスしますが、v-for range 属性は i エイリアスを使用して現在の要素のインデックスにアクセスします。ループ内で key 属性を使用して、各要素を識別する一意のキーを指定すると、変更の追跡に役立ちます。 $index プロパティを使用して、要素のインデックスを取得できます。

Vue の for ループ

Vue で for ループを使用すると、配列またはオブジェクト、およびそれぞれのオブジェクトを走査できます。要素に対して操作を実行します。

for ループを作成するには 2 つの構文があります:

v-for ディレクティブ

<code class="html"><template v-for="item in items">
  <!-- 模板内容 -->
</template></code>

where:

• items は、走査する配列またはオブジェクトです。
• item は、ループ内の各要素のエイリアスです。

v -for Range 属性

<code class="html"><template>
  <div v-for="i in 5">
    <!-- 模板内容 -->
  </div>
</template></code>

ここで:

• i は、0
## から始まるループ内の各要素のインデックスです。

#使用法

item または i を使用して現在の要素にアクセスできます。例:

<code class="html"><ul>
  <li v-for="item in items">{{ item }}</li>
</ul></code>

items 配列内の対応する要素の値であるリストが作成されます。

Key

key 属性を使用して、各要素を識別するための一意のキーを指定できます。これは、Vue が要素への変更を追跡するのに役立ちます。例:

<code class="html"><ul>
  <li v-for="item in items" :key="item.id">{{ item.name }}</li>
</ul></code>

Index

$index 属性を使用できます。例:

<code class="html"><ul>
  <li v-for="item in items">{{ $index }} - {{ item }}</li>
</ul></code>

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