【 Vue.js v-for編】逃げてたけどやってみたら簡単だった♯５　FIREへの旅路 ♯431

S.A.P.Studio

2022年6月10日 18:52

Vue.jsを学習の第五回です。

前回はこちら

私自身が、学びながら、書きますから、
初学者が疑問に思うことを、フォローできると思います。

共に、学びましょう！！

【 Vue.js 】

VueはJavaScriptのライブラリです。
jQueryなどと同じものです。JavaScriptを簡単に扱いやすくしたものという理解で良いでしょう。
何ができるのかを、具体的に見ていきます。

◆ できること　#５「v-for」◆

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>


</head>

<body>

  <div id="app"><!-- id名を "app" にする -->
    <ul>
      <li v-for="pref in prefs"> <!-- ① pref に prefsの配列を in するの意味 -->
        {{ pref.name }} <!-- ② マスタッシュでpref.nameを置き換え -->
      </li>
    </ul>
  </div>


  <!-- VueのCDNを貼り付けて、Vueを使えるようにする -->
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>


  <!-- <script>タグで囲んでVueのコードを書く -->
  <script>
    var app = new Vue({
      el: "#app",     //elはelementの略 Vueの効果範囲を指定 #appの中だけ指定
      data: {        //dataの中にVueで扱うデータを定義する 
        prefs: [     //③ prefsの配列を定義する
          { name: "北海道" },
          { name: "青森県" },
          { name: "岩手県" },
          { name: "宮城県" },
          { name: "秋田県" }
        ]
      },
    });
  </script>
</body>

</html>

今回は、Vueを使った配列を作ります。

① pref に prefsの配列を in する

  <div id="app"><!-- id名を "app" にする -->
    <ul>
      <li v-for="pref in prefs"> <!-- ① pref に prefsの配列を in するの意味 -->
        {{ pref.name }} <!-- ② マスタッシュでpref.nameを置き換え -->
      </li>
    </ul>
  </div>

<li>タグに、v-forを加えて、配列を作ります。

<li v-for="pref in prefs">

このコードの意味は、
"pref"は変数名
"prefs"は配列名です。

つまり、
配列の要素を、"pref"という変数に入れていくということです。

② マスタッシュでpref.nameを置き換え

 <div id="app"><!-- id名を "app" にする -->
    <ul>
      <li v-for="pref in prefs"> <!-- ① pref に prefsの配列を in するの意味 -->
        {{ pref.name }} <!-- ② マスタッシュでpref.nameを置き換え -->
      </li>
    </ul>
  </div>

マスタッシュを使って、Vueでこの中身を置き換えます。

③ prefsの配列を定義する

  <script>
    var app = new Vue({
      el: "#app",     //elはelementの略 Vueの効果範囲を指定 #appの中だけ指定
      data: {        //dataの中にVueで扱うデータを定義する 
        prefs: [     //③ prefsの配列を定義する
          { name: "北海道" },
          { name: "青森県" },
          { name: "岩手県" },
          { name: "宮城県" },
          { name: "秋田県" }
        ]
      },
    });
  </script>

Vueの中で、"prefs"という配列を作ります。

配列を作るときは、
大カッコ [ ]　で配列全体を囲い、
さらに、中カッコ { } で配列の要素を囲います。

ここで、マスタッシュのnameを置き換えるために、
配列を

{ name: "北海道" },

と書きます。

【 v-for 】

v-forは配列を作るディレクティブです。

v-for="pref in prefs"

この動きを理解しておくと良いでしょう。

"prefs"という配列から、"北海道"を取り出して、"pref"という変数に格納する。

さらに、配列があれば、"青森県"を取り出して、"pref"という変数に格納する。

これが繰り返される。

この処理が、v-forです。

【まとめ】

今回は、v-forで配列を作る方法を学びました。

次回もVueの学習を続けます！！

この記事が気に入ったらサポートをしてみませんか？

【 Vue.js v-for編 】 逃げてたけどやってみたら簡単だった♯５ FIREへの旅路 ♯431