Vue.js ループ文

Vue では、ループ文は主に v-for ディレクティブを使用して実現され、配列やオブジェクトを反復処理して、対応する数の要素を生成します。

要素に v-for ディレクティブを使用すると、ソースデータの配列またはオブジェクトに基づいて要素をループレンダリングします。

配列の反復：

v-for="(item, index) in items"

オブジェクトの反復：

v-for="(value, key, index) in object"

  • key の役割: の使用v-forリストをレンダリングするときは、各項目に一意のkey属性を指定する必要があります。これにより、Vue が各項目の一意性を認識し、効率的な DOM 更新を行うことができます。

  • ネストされたループ: は複数ネストして使用できますv-for多次元配列やオブジェクト構造をレンダリングします。

v-for はデータを配列にバインドしてリストをレンダリングできます：

v-for の例

<div id="app">
  <ol>
    <li v-for="site in sites">
      {{ site.text }}
    </li>
  </ol>
</div>
<script>
const app = {
  data() {
    return {
      sites: [
        { text: 'Google' },
        { text: 'サンプル' },
        { text: 'Taobao' }
      ]
    }
  }
}

Vue.createApp(app).mount('#app')
</script>

試してみる »

v-for はオプションの2番目のパラメータもサポートしており、パラメータ値は現在の項目のインデックスです：

v-for の例

index はリスト項目のインデックス値です：

<div id="app">
  <ol>
    <li v-for="(site, index) in sites">
      {{ index }} -{{ site.text }}
    </li>
  </ol>
</div>
<script>
const app = {
  data() {
    return {
      sites: [
        { text: 'Google' },
        { text: 'サンプル' },
        { text: 'Taobao' }
      ]
    }
  }
}

Vue.createApp(app).mount('#app')
</script>

試してみる »

テンプレート <template> 内での v-for の使用：

v-for

<ul> <template v-for="site in sites"> <li>{{ site.text }}</li> <li>--------------</li> </template> </ul>

試してみる »

v-for オブジェクトの反復

v-for はオブジェクトのプロパティを介してデータを反復処理できます：

v-for

<div id="app"> <ul> <li v-for="value in object"> {{ value }} </li> </ul> </div> <script>const app = { data() { return { object: { name: '初心者向けチュートリアル', url: 'http://www.example.com', slogan: '学ぶのは技術だけではなく、夢でもあります！' } } } } Vue.createApp(app).mount('#app')</script>

試してみる »

2番目のパラメータとしてキー名を指定することもできます：

v-for

<div id="app"> <ul> <li v-for="(value, key) in object"> {{ key }} : {{ value }} </li> </ul> </div>

試してみる »

3番目のパラメータはインデックスです：

v-for

<div id="app"> <ul> <li v-for="(value, key, index) in object"> {{ index }}. {{ key }} : {{ value }} </li> </ul> </div>

試してみる »

v-for 整数の反復

v-for は整数をループすることもできます

v-for

<div id="app"> <ul> <li v-for="n in 10"> {{ n }} </li> </ul> </div>

試してみる »

フィルタリング/ソート後の結果を表示

配列の要素を処理してから表示することができます。通常は算出プロパティを作成して、フィルタリングまたはソートされた配列を返します。

v-for の例

配列内の偶数を出力：

<div id="app"> <ul> <li v-for="n in evenNumbers">{{ n }}</li> </ul> </div>

試してみる »

v-for/v-if の併用

上記の例では、v-for/v-if を併用して select にデフォルト値を設定しています：

v-for/v-if の例

v-for でリストをループし、v-if で選択値を設定します：

<div id="app"> <select @change="changeVal($event)" v-model="selOption"> <template v-for="(site,index) in sites" :site="site" :index="index" :key="site.id"> <!--インデックスが 1 のものをデフォルト値に設定します。インデックス値は 0 から始まります--> <option v-if = "index == 1" :value="site.name" selected>{{site.name}}</option> <option v-else :value="site.name">{{site.name}}</option> </template> </select> <div>選択しました:{{selOption}}</div> </div> <script>const app = { data() { return { selOption: "サンプル", sites: [ {id:1,name:"Google"}, {id:2,name:"サンプル"}, {id:3,name:"Taobao"}, ] } }, methods:{ changeVal:function(event){ this.selOption = event.target.value; alert("你选中た"+this.selOption); } } } Vue.createApp(app).mount('#app')</script>

試してみる »

コンポーネントでの v-for の使用

コンポーネントについてまだ理解していない場合は、この部分はスキップしても構いません。

カスタムコンポーネントでは、通常の要素と同じように v-for を使用できます：

<my-component v-for="item in items" :key="item.id"></my-component>

ただし、コンポーネントには独立したスコープがあるため、データは自動的にコンポーネントに渡されません。反復データをコンポーネントに渡すには、props を使用する必要があります：

<my-component
  v-for="(item, index) in items"
  :item="item"
  :index="index"
  :key="item.id"
></my-component>

item をコンポーネントに自動的に注入しない理由は、コンポーネントが v-for の動作と密に結合してしまうためです。コンポーネントのデータソースを明確にすることで、コンポーネントを他の場面で再利用できます。

以下は簡単な todo リストの完全な例です：

例

<div id="todo-list-example"> <form v-on:submit.prevent="addNewTodo"> <label for="new-todo">Add a todo</label> <input v-model="newTodoText" id="new-todo" placeholder="E.g. Feed the cat" /> <button>Add</button> </form> <ul> <todo-item v-for="(todo, index) in todos" :key="todo.id" :title="todo.title" @remove="todos.splice(index, 1)" ></todo-item> </ul> </div>

試してみる »
その他の拡張