【Vue3】v-forとは？使い方を紹介する
v-forとは？
html(DOM)を繰り返し表示させたい時に便利なディレクティブです。
リストを表示するときなどに使えます。
この記事を書いた人
@takasqr アプリケーション開発が大好きなエンジニア。Vue、Swift、Electrom などでアプリを作って公開している。AWS や Firebase などのクラウドサービスも好き。
v-forの書き方
v-forの書き方を説明します。
基本形
v-forは値の部分に、item in itemsの形式で書く必要があります。
itemsがデータソースで、itemがループ後に使用出来る単体データです。
<script>
import { reactive } from 'vue'
export default {
setup() {
let items = reactive(['apple', 'orange'])
return {
items
}
}
}
</script>
<template>
<ul>
<li v-for="item in items" :key="item">
{{ item }}
</li>
</ul>
</template>
v-forのindexとは
(item, index) in itemsのようにitemのパートに二つ目の引数をとることで、indexを取り出すことができます。
<template>
<ul>
<li v-for="(item, index) in items" :key="item">
{{ index + ' - ' + item }}
</li>
</ul>
</template>
v-forのkeyとは
v-forを使う時は一緒にv-bindでkey属性を追加することが推奨されています。
そうすることで、データソースの値を、後から操作した時に整合性ととれた挙動になります。
<template>
<ul>
<li v-for="(item, index) in items" :key="item">
{{ index + ' - ' + item }}
</li>
</ul>
</template>
v-forで連想配列をループする
v-forのデータソースにJavascriptの連想配列を取ることもできます。
<script>
import { reactive } from 'vue'
export default {
setup() {
let object = { name: 'apple', count: 1 }
return {
object
}
}
}
</script>
<template>
<ul>
<li v-for="(value, name, index) in object" :key="index">
{{ index + ' - ' + name + ' : ' + value }}
</li>
</ul>
</template>
v-forで指定回数ループする
v-forのデータソースに整数を指定することで、指定した回数だけ要素をループさせることができます。
<template>
<ul>
<li v-for="n in 5" :key="n">
{{ n }}
</li>
</ul>
</template>
v-ifとv-forを同時に使う
v-if と v-for を同時に利用することは 推奨されません。
これは同じ要素にv-ifとv-forを使用することが推奨されないという意味です。回避するにはv-forの中の要素でv-ifを使用することが公式サイトで推奨されています。
公式サイトで推奨されている回避方法を紹介します。
<script>
import { reactive } from 'vue'
export default {
setup() {
let items = reactive([{ name: 'apple', isView: true }, { name: 'orange', isView: false }])
return {
items
}
}
}
</script>
<template>
<ul>
<template v-for="item in items" :key="item.name">
<li v-if="item.isView">
{{ item.name }}
</li>
</template>
</ul>
</template>
