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>
var 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>
var vm = new Vue({
    el: '#app',
    data: {
        members: {
            'Boss': { name: 'JohnsonLu', age: 30 },
            'Design': { name: 'JoyceLu', age: 28 },
            'RD': { name: 'RogerLo', age: 29 }
        }
    }
});
Categories: Vue