V-forを使用してVue.jsのアイテムを反復処理する方法
序章
フロントエンドアプリケーションの一般的な要件は、アイテムを一覧表示することです。 それはやることリストとカードシステムの形をとることができます。 Vue.jsは、組み込みのv-for<
コアディレクティブを使用したブラウザーへのアイテムのリストのレンダリングをサポートしています。
この投稿では、v-for
をVueアプリケーションでどのように使用できるかを探ります。
前提条件
この投稿は、JavaScriptのループ、配列、およびオブジェクトに関する知識があることを前提としています。 JavaScriptを使い始めた場合は、このシリーズを参照できます。
この調査は、Vue.jsフレームワークのCDN(コンテンツ配信ネットワーク)でホストされているコピーを使用するHTMLファイルに基づいて構築されます。
vfor.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>v-for</title> </head> <body> <div id="app"> <h1>{{ message }}</h1> </div> <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script> <script> new Vue({ el: "#app", data() { return { message: "hello" } } }); </script> </body> </html>
Vue.jsを使い始めた場合は、この投稿を参照できます。
この時点で、このコードをアップロードしてこのファイルをブラウザで表示すると、"hello"
というメッセージが表示されます。
範囲でv-for
を使用
組み込みのv-for
ディレクティブを使用すると、アイテムをループできます。
v-for
ディレクティブの範囲を使用して、指定した回数を繰り返すことができます。
<div>
の内容を、リスト項目を15回繰り返す順序付けされていないリストに置き換えてみましょう。
vfor.html
<div id="app"> <ul> <li v-for="item in 15">{{ item }}</li> </ul> </div>
これにより、番号1
から15
の順序付けられていないリストが作成されます。
<template>
要素の使用
v-for
ディレクティブは、アタッチされている要素にのみ適用されます。 v-for
ディレクティブで複数のアイテムを繰り返す必要がある場合は、要素を<template>
要素でラップする必要があります。
<div>
の内容を<template>
に置き換えましょう。
vfor.html
<div id="app"> <template v-for="item in 15"> <span>{{ item }}</span> <button>Count</button> </template> </div>
これにより、<span>
と<button>
の繰り返しのコレクションが作成されます。
オブジェクトでのv-for
の使用
データモデルからobjectItems
オブジェクトの値をループできます。 これは、繰り返す必要のある要素にv-for
ディレクティブを追加することで実現できます。
data()
の行を変更して、objectItems
オブジェクトを返すようにします。
vfor.html
<script> new Vue({ el: "#app", data() { return { objectItems: { key1: 'item1', key2: 'item2', key3: 'item3' } } } }); </script>
<div>
の内容を、リスト項目を繰り返す順序付けされていないリストに置き換えてみましょう。
vfor.html
<div id="app"> <ul> <li v-for="item in objectItems">{{ item }}</li> </ul> </div>
外観は次のとおりです。
Output<div id="app"> <ul> <li>item1</li> <li>item2</li> <li>item3</li> </ul> </div>
これにより、オブジェクトのプロパティ値を含む順序付けられていないリストが作成されます。
プロパティ値に加えて、Vueでオブジェクトをループするときに2つの追加パラメーターを取得します。 つまり、key
とindex
の値です。
key
値を使用すると、現在のプロパティキーにアクセスできます。
index
は、ループ内の現在のアイテムのインデックスを提供します。 これは、ループリスト内のアイテムの位置です。
<div>
の内容を、item
、key
、およびindex
のリストアイテムを繰り返す順序付けされていないリストに置き換えましょう。
vfor.html
<div id="app"> <ul> <li v-for="(item, key, index) in objectItems"> {{ item }} - {{ key }} - {{ index }} </li> </ul> </div>
外観は次のとおりです。
Output<div id="app"> <ul> <li>item1 - key1 - 1</li> <li>item2 - key2 - 2</li> <li>item3 - key3 - 3</li> </ul> </div>
これにより、item
、key
、およびindex
の順序なしリストが作成されます。
アレイでのv-for
の使用
データモデルからshoppingItems
配列の項目をループできます。 これは、繰り返す必要のある要素にv-for
ディレクティブを追加することで実現できます。
data()
の行を変更して、オブジェクトを含むshoppingItems
配列を返すようにします。
vfor.html
<script> new Vue({ el: "#app", data() { return { objectItems: { key1: 'item1', key2: 'item2', key3: 'item3' }, shoppingItems: [ { name: 'apple', price: '7' }, { name: 'orange', price: '12' } ] } } }); </script>
shoppingItems
配列内のオブジェクトをループし、指定されたキーを使用して値にアクセスできます。
<div>
の内容を、item.name
とitem.price
のリストアイテムを繰り返す順序付けられていないリストに置き換えましょう。
vfor.html
<div id="app"> <ul> <li v-for="item in shoppingItems"> {{ item.name }} - {{ item.price }} </li> </ul> </div>
外観は次のとおりです。
Output<div id="app"> <ul> <li>apple - 7</li> <li>orange - 12</li> </ul> </div>
これにより、配列の値を含む順序付けられていないリストが作成されます。
v-bind:key
を使用して要素を追跡する
配列の順序が変更されると、デフォルトでは、VueはDOM要素を更新された位置に移動するのではなく、既存の各要素のデータを変更します。
キーを使用して各要素を追跡するようにVueを設定できます。 これにより、値が置き換えられるのではなく、要素が移動します。
この値は、繰り返される各要素に固有である必要があります。
item.name
を使用してキーを割り当てましょう。
vfor.html
<div id="app"> <ul> <li v-for="item in shoppingItems" v-bind:key="item.name"> {{ item.name }} - {{ item.price }} </li> </ul> </div>
現在、Vueには、変更が加えられたときにノードのIDを追跡する方法があります。
変更の管理
箱から出して、v-for
は配列ミューテーションメソッドをサポートします。 これらは、push
、pop
、shift
、unshift
、splice
、sort
、およびreverse
です。 。 これらの操作のいずれかがアレイで実行されると、v-for
ディレクティブは新しいデータでビューを更新します。
また、配列を新しい配列に置き換えると、Vueはアイテムを更新するための最も最適化された方法を見つけます。
変更管理の問題
アレイで変更されたときにVueが追跡できない2つのことは次のとおりです。
- 直接設定項目。
例:
data.shoppingItems[3] = { price: 10, name: 'pineapple' };
これは、Vue.set
メソッドを使用して解決できます。 このメソッドは、array
、index
、およびnew value
を受け入れます。
Vue.set(data.shoppingItems, 3, { price: 10, name: 'pineapple' });
また、splice
を使用して、特定のインデックスに値を設定できます。
- 配列の長さを変更します。
例:
data.shoppingItems.length = 2;
問題を回避するために直接設定する代わりに、splice
を使用して配列の長さを変更できます。
フィルタリングリスト
元のリストを変更せずに、表示されているリストを除外できます。 これは、computed
値を使用するか、v-for
値を設定するときにメソッドを使用して値を渡すことによって実行できます。
computed
値を使用したアイテムのフィルタリング
リストに直接値を設定する代わりに、computed
値をポイントします。 その計算された関数でデータを除外するためのロジックを書くことができます。
まず、itemsLessThanTen
を定義しましょう。
vfor.html
<script> new Vue({ el: "#app", data() { return { objectItems: { key1: 'item1', key2: 'item2', key3: 'item3' }, shoppingItems: [ { name: 'apple', price: '7' }, { name: 'orange', price: '12' } ] } }, computed: { itemsLessThanTen: function() { return this.shoppingItems.filter(function(item) { return item.price < 10; }) } } }); </script>
次に、v-for
をitemsLessThanTen
を使用するように変更しましょう。
vfor.html
<div id="app"> <ul> <li v-for="item in itemsLessThanTen" v-bind:key="item.name"> {{ item.name }} - {{ item.price }} </li> </ul> </div>
外観は次のとおりです。
Output<div id="app"> <ul> <li>apple - 7</li> </ul> </div>
itemLessThanTen
関数は、JavaScript filter
関数を使用して、価格が10未満のアイテムを返します。
メソッドを使用してアイテムをフィルタリングする
このアプローチでは、同じshoppingItems
リストを定義したメソッドに直接渡します。 そうすることで、配列内のすべてのアイテムがメソッド定義に従ってフィルタリングされます。
まず、filterItems
を定義しましょう。
vfor.html
<script> new Vue({ el: "#app", data() { return { objectItems: { key1: 'item1', key2: 'item2', key3: 'item3' }, shoppingItems: [ { name: 'apple', price: '7' }, { name: 'orange', price: '12' } ] } }, computed: { itemsLessThanTen: function() { return this.shoppingItems.filter(function(item) { return item.price < 10; }) } }, methods: { filterItems: function(items) { return items.filter(function(item) { return item.price < 10; }) } } }); </script>
次に、v-for
をfilterItems
を使用するように変更しましょう。
vfor.html
<div id="app"> <ul> <li v-for="item in filterItems(shoppingItems)" v-bind:key="item.name"> {{ item.name }} - {{ item.price }} </li> </ul> </div>
外観は次のとおりです。
Output<div id="app"> <ul> <li>apple - 7</li> </ul> </div>
filterItems
メソッドは、computed
値の例と同じ機能を実行し、最終結果は同じになります。
結論
この記事では、Vueアプリケーションでのv-for
の使用について学習しました。 範囲、キー、computed
、およびmethods
を紹介しました。
Vue.jsの詳細については、Vue.jsトピックページで演習とプログラミングプロジェクトを確認してください。