Vueにおける配列の反復処理でのキーの取得

時には、配列の要素に加えてキーにもアクセスしたい場合があります。そのためには、次の拡張構文を使用します：

App.vue<template>
  <p v-for="(elem, key) in arr">
     {{ key }} {{ elem }}
  </p>
</template>

出力時にキーに対して様々な操作を行うことができます。例えば、番号を1から始まるようにしましょう：

App.vue<template>
  <p v-for="(elem, key) in arr">
     {{ key + 1 }} {{ elem }}
  </p>
</template>

javascriptdata() {
  return {
    arr: ['x', 'y', 'z'],
  }
}