Vue.js

The `v-for` in Vue.js 3 is a directive that allows you to loop through arrays or objects and repeatedly render the same template for each item.

v-for

　Vue.js 3の v-forディレクティブは、リストやオブジェクトの繰り返しを行うために使用します。配列やオブジェクトの各アイテムに対してループを実行し、テンプレート内でその内容を繰り返し表示する際に便利です。

{{ index + 1 }}. {{ item }}

HTML

<!-- 開発環境向け -->
<head>
	<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>

<!-- 本番環境向け -->
<head>
	<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
</head>

HTML

<div id="app">
	<ul>
		<li v-for="(item, index) in items" :key="index">
			{{ index + 1 }}. {{ item }}
		</li>
	</ul>
</div>
<script>
	<!-- JavaScript code here -->
</script>

JavaScript

const { createApp } = Vue;

createApp({
	data() {
		return {
			items: ['apple', 'banana', 'orange', 'strawberry']
		};
	}
}).mount('#app');

v-forディレクティブ

v-for="(item, index) in items" のように使います。
items 配列内の各要素（この場合は「apple」「banana」「orange」「strawberry」）が itemに渡され、indexにはそのアイテムのインデックスが渡されます。
配列やオブジェクトの要素を繰り返し描画する際にv-forを使います。

:key属性

v-for内で繰り返される要素には、固有のキーを割り当てることが推奨されています。これにより、Vueが効率的に再レンダリングを行えます。
一般的に、indexやユニークな IDを使ってキーを設定します。

createAppと mount

Vue.js 3では、createAppでアプリケーションインスタンスを作成し、mountメソッドで HTMLの要素にアプリケーションをマウントします。

　これで、v-forの基本的な使い方が理解できるかと思います。