v-for 使ってみる

v-forを使ってみる

v-forを使って、リストを表示してみます。

まずはリストを準備します。

  data() {
    return {
      items: [
        { id: 1, name: "apple" },
        { id: 2, name: "orange" },
        { id: 3, name: "peach" },
        { id: 4, name: "grape" },
        { id: 5, name: "melon" },
      ]
    }
  }

v-forを使って、↑をリスト表示します。

  <ul>
    <li v-for="item in items" :key="item.id">
      {{ item.name }}
    </li>
  </ul>

v-for="item in itemsで、itemsの中身を一つずつitemとして取り出します。
一意に識別するために、:keyを設定しています。

これで、v-forでリスト表示できました。
↓の感じになります。

終わり