Vue.jsの基本的な機能の一つに「v-for」ディレクティブがあります。これは、配列やオブジェクトのデータを反復してDOM要素をレンダリングするために使用されます。本記事では、v-forの基本的な使い方から応用例までを詳しく解説します。
v-forディレクティブとは？
v-for ディレクティブは、配列やオブジェクトの各要素をループし、テンプレート内に表示するために使用されます。Vue.jsでリストやテーブルなどの繰り返し要素を動的に生成するために不可欠な機能です。
基本的な使い方
<li v-for="item in items" :key="item.id">
{{ item.text }}
</li>ここでは、items という配列の各要素を item としてループし、リストアイテムとして表示します。key 属性を指定することで、レンダリングの効率を向上させます。
オブジェクトの反復
配列だけでなく、オブジェクトのプロパティを反復することもできます。
<div v-for="(value, key) in object" :key="key">
{{ key }}: {{ value }}
</div>ここでは、object の各プロパティ key とその値 value をループしています。
インデックスの使用
ループの現在のインデックスを取得することも可能です。
<li v-for="(item, index) in items" :key="index">
{{ index }}: {{ item.text }}
</li>これにより、各要素のインデックス index を使用して要素にアクセスできます。
多次元配列の反復
多次元配列を反復する場合、入れ子にした v-for を使用します。
<div v-for="(row, rowIndex) in table" :key="rowIndex">
<div v-for="(cell, cellIndex) in row" :key="cellIndex">
{{ cell }}
</div>
</div>実用例：Todoリスト
簡単なTodoリストを表示する例を紹介します。
<template>
<div>
<ul>
<li v-for="todo in todos" :key="todo.id">
{{ todo.text }}
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
todos: [
{ id: 1, text: 'Learn Vue.js' },
{ id: 2, text: 'Build a project' },
{ id: 3, text: 'Master Vue.js' }
]
};
}
};
</script>まとめ
v-for ディレクティブは、Vue.js でリストやテーブルなどの繰り返し要素を動的に生成するための強力なツールです。配列やオブジェクトをループし、一意のキーを使用して効率的にレンダリングを行うことができます。繰り返し処理の中でインデックスやネストされた構造にも対応できるため、様々な場面で活用することができます。
