［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