vue中v-for怎么遍历对象

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

Vue 中遍历对象的 v-for

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

语法

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

示例

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

假设有一个对象 person：

<code class="javascript">const person = {
  name: 'John',
  age: 30
};</code>

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

<code class="html"><template v-for="item in person">
  <p>属性名：{{ item }}</p><div class="aritcle_card flexRow">
                                                        <div class="artcardd flexRow">
                                                                <a class="aritcle_card_img" href="/ai/1364" title="问小白"><img
                                                                                src="https://img.php.cn/upload/ai_manual/001/431/639/68b6d4225d473399.png" alt="问小白"  onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
                                                                <div class="aritcle_card_info flexColumn">
                                                                        <a href="/ai/1364" title="问小白">问小白</a>
                                                                        <p>免费使用DeepSeek满血版</p>
                                                                </div>
                                                                <a href="/ai/1364" title="问小白" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
                                                        </div>
                                                </div>
  <p>属性值：{{ person[item] }}</p>
</template></code>

渲染结果：

<code class="html"><p>属性名：name</p>
<p>属性值：John</p>
<p>属性名：age</p>
<p>属性值：30</p></code>

注意

• v-for 指令中的 item 可以是任意变量名，它将表示对象中的每个值。
• 要访问对象的属性，可以使用 person[item]，其中 item 是属性名。
• v-for 指令只能遍历对象的可枚举属性，不能遍历非可枚举属性。