在Vue.js中如何展示含数组属性的对象并匹配指定列表结构？

实现思路 #

你需要用双层v-for指令完成渲染：

• 第一层v-for遍历JSON对象，拿到每个键名和对应的数组值
• 第二层v-for遍历数组，渲染每个列表项

完整代码示例 #

选项式API（Vue2/Vue3通用） #

<template>
  <!-- 外层遍历JSON对象，value是数组，key是对象的键 -->
  <div v-for="(timeArr, groupKey) in timeGroup" :key="groupKey">
    <h1>{{ groupKey }}</h1>
    <ul>
      <!-- 内层遍历数组渲染每个li -->
      <li v-for="timeItem in timeArr" :key="timeItem">
        {{ timeItem }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 你的JSON对象存到响应式数据里
      timeGroup: {
        "1": [
          "15-16",
          "16-17",
          "17-18",
          "18-19"
        ],
        "2": [
          "15-16",
          "16-17",
          "17-18",
          "18-19"
        ]
      }
    }
  }
}
</script>

组合式API（Vue3