当前位置: 首页 > 文档资料 > Vue.js 教程 >

1.8.2 对象的 v-for

优质
小牛编辑
132浏览
2023-12-01

你也可以用v-for通过一个对象的属性来迭代。

<ul id="v-for-object" class="demo">
  <li v-for="value in object">
    {{ value }}
  </li>
</ul>

new Vue({
  el: '#v-for-object',
  data: {
    object: {
      firstName: 'John',
      lastName: 'Doe',
      age: 30
    }
  }
})

结果:

  • {{ value }}

你也可以提供第二个的参数为键名:

<div v-for="(value, key) in object">
  {{ key }}: {{ value }}
</div>
{{ key }}: {{ value }}

第三个参数为索引:

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

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