［Vue3］ループのざっくりまとめ

# 概要
v-forディレクティブ自体はJavascriptのfor文と似ているが、配列やオブジェクトの値に対応しているため個別にまとめる。

# 配列
```:記法
・インデックスを利用しない場合
v-for="要素の変数 in 配列の変数"
・インデックスを利用する場合
v-for ="(要素の変数, インデックスの変数) in 配列の変数"
```

```App.vue
<script setup lang="ts">
import { ref } from "vue";
const cocktailListInit: string[] = ["ホワイトレディ", "ブルーハワイ", "ニューヨーク"];
const cocktailList = ref(cocktailListInit);
</script>

<template>
	<div>・インデックスなし</div>
	<div v-for="cocktailName in cocktailList" v-bind:key="cocktailName">
		{{ cocktailName }}
	</div>
	<div>・インデックスあり</div>
	<div v-for="(cocktailName, index) in cocktailList" v-bind:key="cocktailName">
		{{ cocktailName }}(インデックス{{ index }})
	</div>
</template>
```

```:出力結果
・インデックスなし
ホワイトレディ
ブルーハワイ
ニューヨーク
・インデックスあり
ホワイトレディ(インデックス0)
ブルーハワイ(インデックス1)
ニューヨーク(インデックス2)
```

# 連想配列

```:記法
v-for="(要素の変数, キー変数) in 配列変数"

v-for="(要素変数, キーの変数, インデックスの変数) in 配列変数"

```

```App.vue
<script setup lang="ts">
import { ref } from "vue";
const cocktailListInit: { [key: number]: string; } = {
	2345: "ホワイトレディ",
	4412: "ブルーハワイ",
	6792: "ニューヨーク"
};
const cocktailList = ref(cocktailListInit);
</script>

<template>
	<div>・インデックスなし</div>
	<div v-for="(cocktailName, id) in cocktailList" v-bind:key="'cocktailList' + id">
		IDが{{ id }}のカクテルは{{ cocktailName }}
	</div>
	<div>・インデックスあり</div>
	<div v-for="(cocktailName, id, index) in cocktailList" v-bind:key="'cocktailListWithIdx' + id">
		{{ index + 1 }}: IDが{{ id }}のカクテルは{{ cocktailName }}
	</div>
</template>

```

```:出力結果
・インデックスなし
IDが2345のカクテルはホワイトレディ
IDが4412のカクテルはブルーハワイ
IDが6792のカクテルはニューヨーク
・インデックスあり
1: IDが2345のカクテルはホワイトレディ
2: IDが4412のカクテルはブルーハワイ
3: IDが6792のカクテルはニューヨーク
```

# オブジェクト
記法は連想配列と同じ

```:記法
v-for="(要素の変数, キー変数) in 配列変数"
```

```App.vue
<script setup lang="ts">
import { ref } from "vue";
const whiteLadyInit: {
	id: number;
	name: string;
	price: number;
} = {
	id: 2345,
	name: "ホワイトレディ",
	price: 1200,
};
const whiteLady = ref(whiteLadyInit);
</script>

<template>
	<div v-for="(value, key) in whiteLady" v-bind:key="key">
		<span>{{ key }} : {{ value }}</span>
	</div>
</template>
```

```:出力結果
id : 2345
name : ホワイトレディ
price : 1200
```

# Map

```:記法
v-for="[キーの変数, 要素の変数, Mapの変数] in 配列の変数"
```

```App.vue
<script setup lang="ts">
import { ref } from "vue";
const cocktailListInit = new Map<number, string>();
cocktailListInit.set(2345, "ホワイトレディ");
cocktailListInit.set(4412, "ブルーハワイ");
cocktailListInit.set(6792, "ニューヨーク");
const cocktailList = ref(cocktailListInit);

</script>

<template>
	<div v-for="[id, cocktailName] in cocktailList" v-bind:key="id">
		IDが{{ id }}のカクテルは{{ cocktailName }}
	</div>
</template>
```

```:出力結果
IDが2345のカクテルはホワイトレディ
IDが4412のカクテルはブルーハワイ
IDが6792のカクテルはニューヨーク
```

# 複数のタグを繰り返す場合はtemplateを使う
連想配列を例に作成する。

```App.vue
<script setup lang="ts">
import {ref} from "vue";
const cocktailListInit: {[key: number]: string;} = {
	2345: "ホワイトレディ",
	4412: "ブルーハワイ",
	6792: "ニューヨーク"
};
const cocktailList = ref(cocktailListInit);
</script>

<template>
	<dl>
		<template
			v-for="(value, key) in cocktailList"
			v-bind:key="key">
			<dt>{{key}}</dt>
			<dd>{{value}}</dd>
		</template>
	</dl>
</template>
```

```:出力結果
2345
    ホワイトレディ
4412
    ブルーハワイ
6792
    ニューヨーク
```

#　カウンタ変数を利用したループ

```:記法
v-for="カウンタ変数 in 終端の値"

```

```App.vue
<template>
	<div v-for="r in 3" v-bind:key="r">
		半径{{ r }}の円の円周: {{ 2 * r * 3.14 }}
	</div>
</template>
```

```:出力結果
半径1の円の円周: 6.28
半径2の円の円周: 12.56
半径3の円の円周: 18.84
```