在 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 引擎下都一致。