• 在 v-for 里使用对象

    在 v-for 里使用对象

    你也可以用 v-for 来遍历一个对象的属性。

    1. <ul id="v-for-object" class="demo">
    2.   <li v-for="value in object">
    3.     {{ value }}
    4.   </li>
    5. </ul>
    1. new Vue({
    2.   el: '#v-for-object',
    3.   data: {
    4.     object: {
    5.       title: 'How to do lists in Vue',
    6.       author: 'Jane Doe',
    7.       publishedAt: '2016-04-10'
    8.     }
    9.   }
    10. })

    结果：

    在 v-for 里使用对象 - 图1

    你也可以提供第二个的参数为 property 名称 (也就是键名)：

    1. <div v-for="(value, name) in object">
    2.   {{ name }}: {{ value }}
    3. </div>

    在 v-for 里使用对象 - 图2

    还可以用第三个参数作为索引：

    1. <div v-for="(value, name, index) in object">
    2.   {{ index }}. {{ name }}: {{ value }}
    3. </div>

    在 v-for 里使用对象 - 图3

    在遍历对象时，会按 Object.keys() 的结果遍历，但是不能保证它的结果在不同的 JavaScript 引擎下都一致。