vue v-for object

20171228

by Syuan Shih

HTML

<div id="app">
    <p>一般Object寫法：</p>
    <ul>
        <li v-for="member in memberObject">
            {{ member }}
        </li>
    </ul>
    <p>加入第二個參數取得key：</p>
    <ul>
        <li v-for="(member, key) in memberObject">
            {{ key }} : {{ member }}
        </li>
    </ul>
     <p>加入第三個參數取得index：</p>
    <ul>
        <li v-for="(member, key, index) in memberObject">
            {{ index }} . {{ key }} : {{ member }}
        </li>
    </ul>
</div>

JavaScript

var vm = new Vue({
    el: '#app',
    data: {
        memberObject: {
            name: 'Eva',
            gender: 'female',
            age: '22'
        }
    }
});