v-forディレクトリを使用する
データプロパティがオブジェクトや配列の時などに使用する
繰り返し描画が可能になる
予期せぬ挙動を防ぐ為、必ずbindさせる必要がある
templateタグは使用できない
<div v-for="(fruit, index) in fruits" :key="index">は使用してはいけない
➡️配列の要素がダブってバグに繋がる
データプロパティはユニークにしてやる必要がある
<div v-for="fruit in fruits" :key="fruit">
<p> {{ fruit }}</p>
<input type="text">
</div>
<!DOCTYPE html>
<html lang="ja">
<head>
<script src="<https://unpkg.com/[email protected]>"></script>
</head>
<body>
<div id="app">
<ol>
<li v-for="(color, index) in colors">{{ index }}{{ color }}</li>
🔼この様にindexも参照できる
</ol>
</div>
<script>
const app = Vue.createApp({
data: () => ({
colors: ['Red', 'Greed', 'Blue']
})
})
app.mount('#app')
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="ja">
<head>
<script src="<https://unpkg.com/[email protected]>"></script>
</head>
<body>
<div id="app">
<p>Value</p>
<ul>
<li v-for="value in user">{{ value }}</li>
</ul>
<p>key:value</p>
<ul>
<li v-for="(value, key, index) in user">{{ key }} : {{ value }}</li>
🔼この様にkeyとindexが参照できる
</ul>
</div>
<script>
const app = Vue.createApp({
data: () => ({
user: {
lastName: 'Miura',
firstName: 'Issei',
age: 28
}
})
})
app.mount('#app')
</script>
</body>
</html>
<template v-for="fruit in fruits">
<li>{{ fruit }}</li>
🔼templateタグで括ると配下の要素で使用ができる
<hr>
</template>
<ul>
<li v-for="n in 10">{{ n }}</li>
</ul>