アウトプットするブログ

繰り返し文字列を出力する際に同じhtml要素を吐き出したい場合v-forを使用します。
実務ではAPIの値を回して出力するケースもあるのですが今回はdataの値を表示していきたいと思います。

<template>
  <div>
    // タイトルを定義
    <h2>{{title}}</h2>
    // itemsはscriptタグ内で定義した物
    <div :key="item" v-for="item in items">{{item}}</div>
  </div>
</template>

<script>
export default {
  name: "App",
  // 値を定義するメソッド
  data() {
    return {
      title: "果物リスト",
      items: ["りんご", "いちご", "ばなな"]
    };
  }
};
</script>

ブログの投稿ログ

v-forの使い方