• Vue.js

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要素をループ処理させる方法について紹介しました。

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