批評v-forで配列を表示する[v-bind:key][index][Vue.js]2019年5月8日JavaScriptv-forディレクティブを利用して、配列の要素を繰り返し表示させてみます。dataオプションにbooksというプロパティ名の配列を用意し、v-forディレクティブで繰り返し表示させています。}]}});</script></body></html>20行目booksプロパティとしての配列からbookという変数名に置き換えたオブジェクトを取得しています。v-forディレクティブは一般的に下記のような記述をします。配列やオブジェクト"またv-forディレクティブを利用する場合、v-bindディレクティブで一意の(ユニークな)keyプロパティを設定する必要があります。上記コードでは、book.idによって一意のkeyを設定しています(※後述に追加説明あり)。配列のインデックスを取得することも可能です。}}</td></tr></tbody></table></div>配列の要素にはインデックスが割り当てられています。実際に表示させたのが下記画像で、インデックス番号が0(ゼロ)から始まっているのが確認できます。一意のkeyプロパティを設定する上述したように、v-forディレクティブを利用する場合、「v-bind:key=”◯◯”」で要素に一意の(ユニークな)keyプロパティを設定する必要があります。これは表示された各要素(つまりDOM)を、Vue.jsが追跡する際のパフォーマンスに影響するからです。v-forによるリスト表示をトランジションによって並び替えする時などに重要となります。配列を元にその要素を繰り返し表示させた場合、下記のようにして配列のインデックスを一意なkeyとして利用しないようにします。