30Vue - 列表渲染(对象迭代 v-for)

简介: 30Vue - 列表渲染(对象迭代 v-for)

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

HTML:

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

JS:

new Vue({
  el: '#repeat-object',
  data: {
    object: {
      FirstName: 'John',
      LastName: 'Doe',
      Age: 30
    }
  }
})

结果:

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

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

第三个参数为索引:

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

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

目录
相关文章
|
2天前
|
JavaScript
vue的生命周期
vue的生命周期
10 3
|
2天前
|
JavaScript 前端开发
vue的生命周期
vue的生命周期
11 2
|
1天前
|
缓存 JavaScript
什么是vue的计算属性?为什么使用?怎么使用?举例说明
什么是vue的计算属性?为什么使用?怎么使用?举例说明
|
1天前
|
缓存 JavaScript 前端开发
Vue基础
Vue基础
13 2
|
2天前
|
JavaScript 前端开发 API
什么是vue
什么是vue
11 4
|
2天前
|
JavaScript API 开发者
Vue中双向数据绑定是如何实现的?底层原理简介
Vue中双向数据绑定是如何实现的?底层原理简介
9 4
|
2天前
|
JavaScript 安全 前端开发
vue怎么处理跨域,原理?
vue怎么处理跨域,原理?
14 2
|
JavaScript 测试技术 容器
Vue2+VueRouter2+webpack 构建项目
1). 安装Node环境和npm包管理工具 检测版本 node -v npm -v 图1.png 2). 安装vue-cli(vue脚手架) npm install -g vue-cli --registry=https://registry.
997 0
|
2天前
|
资源调度 JavaScript
vue的跳转传参
vue的跳转传参
8 0
|
2天前
|
缓存 JavaScript 开发者
什么是vue的计算属性
什么是vue的计算属性
7 0