首页> 基础笔记 >Vue学习笔记 Vue学习笔记
v-for指令遍历对象
作者：小萝卜 2024-03-09 【 Vue 】 浏览 87
简介你也可以使用 v-for 来遍历一个对象的所有属性。遍历的顺序会基于对该对象调用 Object.keys() 的返回值来决定。
v-for 与对象
你也可以使用 v-for 来遍历一个对象的所有属性。遍历的顺序会基于对该对象调用 Object.keys() 的返回值来决定。
export default{
data(){
return{
myObject:{
title: 'How to do lists in Vue',
author: 'Jane Doe',
publishedAt: '2016-04-10'
},
}
}
}
<ul>
<li v-for="value in myObject">
{{ value }}
</li>
</ul>
可以通过提供第二个参数表示属性名 (例如 key)：
<li v-for="(value, key) in myObject">
{{ key }}: {{ value }}
</li>
第三个参数表示位置索引：
<li v-for="(value, key, index) in myObject">
{{ index }}. {{ key }}: {{ value }}
</li>
很赞哦！ (0)
上一篇：v-for指令通过key管理状态
下一篇：vue的列表渲染指令v-for
