コリラボ

技術の学びの備忘録

Vue.js

v-forで都道府県を表示する

v-forで都道府県表示を行う

v-forは、Phpのforeach構文みたいに何度も同じ処理を繰り返す処理で、リスト表示などによく使う表現です。 まとめサイトを作るとき必ずお世話になる?都道府県リストを今回は作ってみたいと思います。

動くサンプルはこちら

動くサンプルはこちら

HTML側の書き方

    <div id="app">
      <ul>
        <li v-for="item in items" :key=item>
          {{ item.label }}{{ item.slug }}
        </li>
      </ul>
    </div>

v-for="item in items" :key=itemがitems(複数)をitem(単体)に処理を書いています。 :key=itemは、v-bind keyで無くても動くのですが、Nuxt.jsなどで使用するとき必須になります。 label slugでは動きません。item.labelitem.slugitem.indexにすると動きます。

スクリプト側の書き方

  <script>
    var example1 = new Vue({
      el: '#app',
      data: {
        items: [
                {
                  "label": "北海道",
                  "slug": "hokkaido"
                },
               {
                  "label": "沖縄県",
                  "slug": "okinawa"
                }
              ]
      }
    })
  </script>

「var」は、JavaScriptプログラムで利用する「変数」を宣言するための命令なんですね。 dataの中にjson形式で都道府県を書くだけです。

 完成したコードがこちら

<!DOCTYPE html>
<html>
  <head>
  </head>

  <body>
    <div id="app">
      <ul>
        <li v-for="item in items" :key=item.index>
          {{ item.label }}{{ item.slug }}
        </li>
      </ul>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>

  <script>
    var example = new Vue({
      el: '#app',
      data: {
        items: [
                {
                  "label": "北海道",
                  "slug": "hokkaido"
                },
                {
                  "label": "青森県",
                  "slug": "aomori"
                },
                {
                  "label": "岩手県",
                  "slug": "iwate"
                },
                {
                  "label": "宮城県",
                  "slug": "miyagi"
                },
                {
                  "label": "秋田県",
                  "slug": "akita"
                },
                {
                  "label": "山形県",
                  "slug": "yamagata"
                },
                {
                  "label": "福島県",
                  "slug": "fukushima"
                },
                {
                  "label": "茨城県",
                  "slug": "ibaraki"
                },
                {
                  "label": "栃木県",
                  "slug": "tochigi"
                },
                {
                  "label": "群馬県",
                  "slug": "gunma"
                },
                {
                  "label": "埼玉県",
                  "slug": "saitama"
                },
                {
                  "label": "千葉県",
                  "slug": "chiba"
                },
                {
                  "label": "東京都",
                  "slug": "tokyo"
                },
                {
                  "label": "神奈川県",
                  "slug": "kanagawa"
                },
                {
                  "label": "新潟県",
                  "slug": "nigata"
                },
                {
                  "label": "富山県",
                  "slug": "toyama"
                },
                {
                  "label": "石川県",
                  "slug": "ishikawa"
                },
                {
                  "label": "福井県",
                  "slug": "fukui"
                },
                {
                  "label": "山梨県",
                  "slug": "yamanashi"
                },
                {
                  "label": "長野県",
                  "slug": "nagano"
                },
                {
                  "label": "岐阜県",
                  "slug": "gifu"
                },
                {
                  "label": "静岡県",
                  "slug": "shizuoka"
                },
                {
                  "label": "愛知県",
                  "slug": "aichi"
                },
                {
                  "label": "三重県",
                  "slug": "mie"
                },
                {
                  "label": "滋賀県",
                  "slug": "shiga"
                },
                {
                  "label": "京都府",
                  "slug": "kyoto"
                },
                {
                  "label": "大阪府",
                  "slug": "osaka"
                },
                {
                  "label": "兵庫県",
                  "slug": "hyogo"
                },
                {
                  "label": "奈良県",
                  "slug": "nara"
                },
                {
                  "label": "和歌山県",
                  "slug": "wakayama"
                },
                {
                  "label": "鳥取県",
                  "slug": "tottori"
                },
                {
                  "label": "島根県",
                  "slug": "shimane"
                },
                {
                  "label": "岡山県",
                  "slug": "okayama"
                },
                {
                  "label": "広島県",
                  "slug": "hiroshima"
                },
                {
                  "label": "山口県",
                  "slug": "yamaguchi"
                },
                {
                  "label": "徳島県",
                  "slug": "tokushima"
                },
                {
                  "label": "香川県",
                  "slug": "kagawa"
                },
                {
                  "label": "愛媛県",
                  "slug": "ehime"
                },
                {
                  "label": "高知県",
                  "slug": "kochi"
                },
                {
                  "label": "福岡県",
                  "slug": "fukuoka"
                },
                {
                  "label": "佐賀県",
                  "slug": "saga"
                },
                {
                  "label": "長崎県",
                  "slug": "nagasaki"
                },
                {
                  "label": "熊本県",
                  "slug": "kumamoto"
                },
                {
                  "label": "大分県",
                  "slug": "oita"
                },
                {
                  "label": "宮崎県",
                  "slug": "miyazaki"
                },
                {
                  "label": "鹿児島県",
                  "slug": "kagoshima"
                },
                {
                  "label": "沖縄県",
                  "slug": "okinawa"
                }
              ]
      }
    })
  </script>
  </body>
</html>