• Vue.js

Vue.jsでループ処理を使い、配列から値を取り出す方法

Vue.jsで配列を定義。

ループ処理を使い、配列から値を一つずつ取り出してhtml要素に出力する方法について知りたい。

本記事ではv-forを使ってこのような悩みを解決します。

v-forとは？

v-forとはVue.jsで繰り返し処理を行えるディレクティブの一つです。

v-forを使う事で、dataメソッドで定義された配列などの値をＨTML要素に繰り返し表示できます。

配列から値を取り出す

<div id="app">
  <ul>
    <li v-for="value in fruits">{{value}}</li>
  </ul>
</div>
<script>
const app = Vue.createApp({
  data() {
    return {
      fruits: ["リンゴ", "メロン", "ブドウ"],
    };
  },
});
app.mount("#app");
</script>

v-forを使って配列から値を取り出し、HTML要素に出力するコード例です。

dataメソッドで定義されたfruits配列に入ってる要素をli要素に出力。

配列要素の数だけli要素を出力してます。

v-forの使い方は以下の通りです。

v-for=”任意の変数名 in 配列”

上記をループ処理で出力したいHTML要素の属性に設定します。

配列はVue.jsのdataメソッドで定義された配列名を使用します。

配列要素の値を表示する方法は以下の通りです。

{{任意の変数名}}

v-for属性で設定した任意の変数名を{{}}で囲います。

上記で表示できます。

まとめ

Vue.jsでループ処理を使い、配列から値を取り出す方法について紹介しました。

以上で解説を終わります。