指定された回数繰り返す

指定された回数返すには、以下のように指定します。

<タグ v-for="変数 in 繰り返す回数">繰り返し表示する部分</タグ>

<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  </head>
  <body>
    <div id="app">
      <p v-for="i in 10">{{ i }}</p>
    </div>

    <!-- Vue アプリケーション -->
    <script>
      const { createApp } = Vue;

      createApp({
        data: function(){
          return {
            show: ""
          };
        }
      }).mount('#app');
    </script>
  </body>
</html>

配列の値を取り出す

<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  </head>
  <body>
    <div id="app">
      <ul>
        <li v-for="item in fruits">{{ item }}</li>
      </ul>
    </div>

    <!-- Vue アプリケーション -->
    <script>
      const { createApp } = Vue;

      createApp({
        data: function(){
          return {
            fruits: ["apple", "orange", "banana"]
          };
        }
      }).mount('#app');
    </script>
  </body>
</html>

配列とインデックス番号を取得するには、以下のようにします。

<li v-for="(item, idx) in fruits">{{ idx }}:{{ item }}</li>

配列の中のオブジェクトの値を取得

<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  </head>
  <body>
    <div id="app">
      <ul>
        <li v-for="(item, idx) in members">{{ idx }}:{{ item.name }}, {{ item.age }}</li>
      </ul>
    </div>

    <!-- Vue アプリケーション -->
    <script>
      const { createApp } = Vue;

      createApp({
        data: function(){
          return {
            members: [
              { name: "Taro", age: 20 },
              { name: "Jiro", age: 18 }
            ]
          };
        }
      }).mount('#app');
    </script>
  </body>
</html>

v-for と v-if の組み合わせ

Vue 3 の仕様上、v-if と v-for を同じ要素に同時に使うと一部バグや警告が出ることがあります。「template タグを使って分離する」ことで問題を回避できます。

v-if と v-for を同じ要素で使うと、処理の優先順序が問題になるため、template タグで v-for を切り出すことを推奨しています。

v-if と v-for - Vue.js 公式ドキュメント

<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  </head>
  <body>
    <div id="app">
      <ul>
        <template v-for="item in members">
          <li v-if="item.age == 20">{{ item.name }}</li>
        </template>
      </ul>
    </div>

    <!-- Vue アプリケーション -->
    <script>
      const { createApp } = Vue;

      createApp({
        data: function(){
          return {
            members: [
              { name: "Taro", age: 20 },
              { name: "Jiro", age: 18 },
              { name: "Hanako", age: 18 },
            ]
          };
        }
      }).mount('#app');
    </script>
  </body>
</html>