Vue List Rendering

Vue：2.5

在 Vue 的框架中，迴圈的相關操作是搭配 v-for 語法使用。

基本操作（Array）

範例

<div id="app">
    <ul>
        <li v-for="member in members">
            {{ member.name }}：{{ member.age }}
        </li>
        <!-- 取得 index -->
        <li v-for="(member, index) in members">
            {{ index }} . {{ member.name }}：{{ member.age }}
        </li>
    </ul>
</div>

const vm = new Vue({
    el: '#app',
    data: {
        members: [
            { name: 'JohnsonLu', age: 30 },
            { name: 'JoyceLu', age: 28 },
            { name: 'RogerLo', age: 29 }
        ]
    }
});

物件操作（Object）

範例

<div id="app">
    <ul>
        <!-- 取得 index 及 Object key -->
        <li v-for="(member, key, index) in members">
            {{ index }} . {{ member.name }}：{{ member.age }} ({{ key }})
        </li>
    </ul>
</div>

const vm = new Vue({
    el: '#app',
    data: {
        members: {
            'Boss': { name: 'JohnsonLu', age: 30 },
            'Design': { name: 'JoyceLu', age: 28 },
            'RD': { name: 'RogerLo', age: 29 }
        }
    }
});

元件（Component）

在動態產生元件時需要特別注意，因為為了效能關係，Vue 只會更新有更動到的 Element；動態產生元件時，最好加上 :key，以免判斷不到而導致沒有更新的狀況。

範例

<Sheet v-for="sheet in sheets" :key="sheet.id"></Sheet>