Vue.js中如何遍历对象与数组的键并显示对应值？

你需要遍历多层嵌套的对象和数组，展示每一层的键和对应值，可以通过Vue的v-for遍历对象的语法（(value, key) in 对象）和数组的语法（(item, index) in 数组）实现多层嵌套遍历。

完整实现代码 #

<div class="col-lg-9 col-md-9">
  <h3>Archives :</h3>
  <!-- 展示最外层 archives 整体结构 -->
  <p>archives: {{ JSON.stringify(archives) }}</p>
  
  <!-- 遍历最外层 archives 对象 -->
  <div class="row" style="margin-left: 20px;" v-for="(yearData, year) in archives" :key="year">
    <p>{{ year }}: {{ JSON.stringify(yearData) }}</p>
    
    <!-- 遍历年份对应的月份对象 -->
    <div class="row" style="margin-left: 20px;" v-for="(monthData, month) in yearData" :key="month">
      <p>{{ month }}: {{ JSON.stringify(monthData) }}</p>
      
      <!-- 遍历月份对应的数组 -->
      <div class="row" style="margin-left: 20px;" v-for="(item, index) in monthData" :key="index">
        <p>{{ index }}: "{{ item }}"</p>
      </div>
    </div>
  </div>
</div>

代码说明 #

• 最外层展示：直接用JSON.stringify(archives)输出完整的archives结构，匹配你期望的首行输出。
• 第一层遍历：v-for="(yearData, year) in archives"，其中year是archives的键（如2023），yearData是该键对应的月份对象。
• 第二层遍历：v-for="(monthData, month) in yearData"，其中month是年份对象的键（如1），monthData是该键对应的内容数组。
• 第三层遍历：v-for="(item, index) in monthData"，其中index是数组的索引（如0、1），item是数组中的具体元素（如"3"、"ABCD"）。
• 内层的margin-left样式用于实现层级缩进，让展示效果和你期望的格式更一致。

内容的提问来源于stack exchange，提问作者saravana