指定された回数繰り返す

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

<タグ 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>