vue中v-for怎么遍历对象-Vue.js-PHP中文网

vue中v-for怎么遍历对象

下次还敢

发布： 2024-05-07 11:33:16

原创

3232人浏览过

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

vue中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>
                    <div class="aritcle_card">
                        <a class="aritcle_card_img" href="/ai/2392">
                            <img src="https://img.php.cn/upload/ai_manual/001/246/273/176352302537509.png" alt="萝卜简历">
                        </a>
                        <div class="aritcle_card_info">
                            <a href="/ai/2392">萝卜简历</a>
                            <p>免费在线AI简历制作工具，帮助求职者轻松完成简历制作。</p>
                            <div class="">
                                <img src="/static/images/card_xiazai.png" alt="萝卜简历">
                                <span>171</span>
                            </div>
                        </div>
                        <a href="/ai/2392" class="aritcle_card_btn">
                            <span>查看详情</span>
                            <img src="/static/images/cardxiayige-3.png" alt="萝卜简历">
                        </a>
                    </div>
                
  <p>属性值：{{ person[item] }}</p>
</template>

登录后复制

渲染结果：

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

登录后复制

注意

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

以上就是vue中v-for怎么遍历对象的详细内容，更多请关注php中文网其它相关文章！

大家都在看：

Vue.js实现音乐播放器的代码示例 Vue的v-bind和v-on的语法糖分别是什么？学习Vue.js的最佳实践博客有哪些 Vue的异步更新队列是如何工作的？ Vue事件处理如何绑定？@click和v-on有什么区别？