vue中v-for怎么遍历对象

百变鹏仔 3个月前 (09-25) #VUE

文章标签遍历

vue 中遍历对象的 v-for 指令通过 v-for="item in object" 语法实现。它允许遍历对象属性并渲染模板内容，具体用法如下：在 v-for 中指定遍历的变量名 item，它代表对象中的每个值。使用 person[item] 访问对象的属性，其中 item 是属性名。v-for 指令仅遍历对象的可枚举属性，而非可枚举属性。

Vue 中遍历对象的 v-for

在 Vue 中，可以通过 v-for 指令遍历对象并渲染模板内容。

语法

<template v-for="item in object"><!-- 模板内容 --></template>

示例

立即学习“前端免费学习笔记（深入）”；

假设有一个对象 person：

const person = {  name: 'John',  age: 30};

要遍历 person 对象并渲染 name 和 age 属性，可以使用以下模板：

<template v-for="item in person"><p>属性名：{{ item }}</p>  <p>属性值：{{ person[item] }}</p></template>

渲染结果：

<p>属性名：name</p><p>属性值：John</p><p>属性名：age</p><p>属性值：30</p>

注意

文章推荐

vue中v-for怎么遍历对象

如何使用Vue和网易云API构建高性能的音乐搜索引擎

Vue中使用v-model的双向绑定优化应用的数据性能

Vue和Canvas：如何实现在线头像裁剪和尺寸调整工具

Vue组件通讯的实现方式有哪些？

如何使用Vue和网易云API开发一款智能化的音乐播放器