Vue 基礎勉強 v-for

(Vue.js 3.1.5を使用)

v-for

以下のように書くと、配列の要素をすべて表示することができる。

javascript

const app = Vue.createApp({
    data: () => ({
        animals: ['カラス', '猫', '熊', 'キツネ', 'たぬき']
    })
})
app.mount('#app')

html

    <div id="app">
        <ol>
            <li v-for="animal in animals">{{animal}}</li>
        </ol>        
    </div>

配列だけでなく、オブジェクトも扱える。

javascript

const app = Vue.createApp({
    data: () => ({
        book:{
            name: 'Vue 入門',
            author: 'やまだ花子',
            year: 2023,
            company: 'ほげほげ書房'
        },
    })
})
app.mount('#app')

html

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

htmlを以下のように書くと、各プロパティのvalueだけでなく、keyの値も表示できる。

html

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