［Vue.js］v-for（ループ）
公開日：2026-02-20
更新日：2026-02-20
更新日：2026-02-20
1. 概要
v-for（ループ）で要素を繰り返し表示します。
動作確認：Vite 7.3.1、Vue.js 3.5.25
動作確認：Vite 7.3.1、Vue.js 3.5.25
2. サンプル - 配列をループ
2.1 コード
src/App.vue
実行結果
コード
<script setup lang="ts">
import { ref } from 'vue';
const fruits = ref([
{ id: 1, name: 'りんご' },
{ id: 2, name: 'みかん' },
{ id: 3, name: 'いちご' },
]);
</script>
<template>
<ul>
<li v-for="fruit in fruits" :key="fruit.id">{{ fruit.name }}</li>
</ul>
<button @click="fruits.push({ id: fruits.length + 1, name: 'メロン' })">メロンを追加</button>
</template>実行結果
2.2 説明
v-for は、繰り返し表示したい要素自体に指定します。
:key には一意の ID を指定します。
画面には表示されませんが、リストの再描画で使用されます。
もし指定しなかった場合は、問題が起きる可能性があります。
また、配列が ref の場合、要素に増減があると、自動的に増減があった部分が再描画されます。
:key には一意の ID を指定します。
画面には表示されませんが、リストの再描画で使用されます。
もし指定しなかった場合は、問題が起きる可能性があります。
また、配列が ref の場合、要素に増減があると、自動的に増減があった部分が再描画されます。
3. サンプル２ - オブジェクトをループ
3.1 コード
src/App.vue
実行結果
コード
<script setup lang="ts">
import { ref } from 'vue';
const user = ref({
name: '太郎',
age: 15,
address: 'Tokyo',
tel: 'xxxx-xxxx-xxxx'
});
</script>
<template>
<ul style="text-align:left;">
<li v-for="(value, key, index) in user" :key="key">{{ index }} : {{ key }}: {{ value }}</li>
</ul>
</template>実行結果
3.2 説明
v-for に配列ではなくオブジェクトを渡すと、オブジェクトのプロパティ毎にループすることができます。
上記の場合、name、age、address、tel の4回ループします。
その際に、プロパティ毎の、値、キー（プロパティ名）、インデックスを取得できます。
ループする際の順序は、プロパティを定義した順になります。
上記の場合、name、age、address、tel の4回ループします。
その際に、プロパティ毎の、値、キー（プロパティ名）、インデックスを取得できます。
ループする際の順序は、プロパティを定義した順になります。
4. サンプル３ - 回数を指定してループ
4.1 コード
src/App.vue
コード
<script setup lang="ts">
const count = 5;
</script>
<template>
<ul style="text-align:left;">
<li v-for="i in count" :key="i" >{{ i }}</li>
</ul>
</template>4.2 説明
ループで出力した要素が増減しないため、key を指定しない場合もあります。
