Vue.jsで指定回数、html要素をループ処理させる方法【v-forディレクティブを使おう】

Vue.jsで指定回数、繰り返しhtml要素をループ処理させたい。
本記事ではこのような悩みを解決。
実装方法について解説します。
実装サンプル
See the Pen
Vue.js 無限スクロール by Kohei (@kouk05)
on CodePen.0
実装サンプルです。
Vue.jsを使ってli要素を10個ループ処理してます。
実装手順は以下の通りです。
v-forディレクティブを使おう
<div id="app">
<ul>
<li v-for="i in 10" :key="i">リスト{{i}}</li>
</ul>
</div>
<script>
const app = Vue.createApp({
data() {
return {
}
},
});
app.mount("#app");
</script>
Vue.jsで指定回数、ループ処理を行うにはv-forディレクティブを使います。
使い方は以下の通りです。
v-for=”変数 in 指定回数”
上記をループさせたいhtml要素の属性に付与。
値に任意の変数名 in ループ処理させたい回数を指定します。
変数にはインデックス番号(指定回数までの要素の連番)が入ります。
以上で実装完了です。
まとめ
Vue.jsのv-forディレクティブを使って、指定回数html要素をループ処理させる方法について紹介しました。
以上で解説を終わります。
目次