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

Vue.jsで配列を定義。
ループ処理を使い、配列から値を一つずつ取り出してhtml要素に出力する方法について知りたい。
本記事ではv-forを使ってこのような悩みを解決します。
v-forとは?
v-forとはVue.jsで繰り返し処理を行えるディレクティブの一つです。
v-forを使う事で、dataメソッドで定義された配列などの値をHTML要素に繰り返し表示できます。
配列から値を取り出す
<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でループ処理を使い、配列から値を取り出す方法について紹介しました。
以上で解説を終わります。
目次