Vue.js教程
1.8.2 对象的 v-for
阅读(

Vue.js 基础

Vue.js 安装

Vue.js 介绍

Vue.js 实例

Vue.js 模板语法

Vue.js 计算属性和侦听器

Vue.js Class 与 Style 绑定

Vue.js 条件渲染

Vue.js 列表渲染

数组的 v-for

对象的 v-for

你也可以用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 引擎下是一致的。

如果本教程对您帮助很大,请随意打赏。您的支持,将鼓励我们提供更好的教程!

← 键盘方向键翻页 →
返回顶部 手机访问 关注微信 返回底部

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验