vue 遍历对象

作者：一剑绝尘发布日期:2025-09-01 浏览:45

// Vue 遍历对象示例代码

<template>
  <div>
    <ul>
      <!-- 使用 v-for 指令遍历对象 -->
      <li v-for="(value, key, index) in myObject" :key="key">
        {{ index }}. {{ key }}: {{ value }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 定义一个对象
      myObject: {
        name: 'Vue.js',
        version: '3.0',
        description: 'A progressive JavaScript framework'
      }
    };
  }
};
</script>

<!-- 解释说明：
1. `v-for` 指令可以用来遍历对象。在遍历时，`v-for` 接收三个参数：`(value, key, index)`。
2. `value` 是对象的值，`key` 是对象的键名，`index` 是当前项的索引。
3. `:key` 绑定到 `key` 参数，确保每个列表项都有唯一的标识符，提高渲染性能和稳定性。
4. 在模板中使用插值语法 `{{}}` 来显示键名和值。
-->

上一篇：vue3watch和watcheffect区别

下一篇：vue3 i18n