vue实现课表展示的代码

下面是一个简单的 Vue 代码实现课表展示：

<template>
  <div>
    <table>
      <thead>
        <tr>
          <th>时间</th>
          <th>星期一</th>
          <th>星期二</th>
          <th>星期三</th>
          <th>星期四</th>
          <th>星期五</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(row, index) in tableData" :key="index">
          <td>{{ row.time }}</td>
          <td v-for="(col, index) in row.data" :key="index">{{ col }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { time: '08:00~09:00', data: ['', '', '', '', ''] },
        { time: '09:00~10:00', data: ['', '', '', '', ''] },
        { time: '10:00~11:00', data: ['', '', '', '', ''] },
        { time: '11:00~12:00', data: ['', '', '', '', ''] },
        { time: '13:00~14:00', data: ['', '', '', '', ''] },
        { time: '14:00~15:00', data: ['', '', '', '', ''] },
        { time: '15:00~16:00', data: ['', '', '', '', ''] },
        { time: '16:00~17:00', data: ['', '', '', '', ''] },
        { time: '18:00~19:00', data: ['', '', '', '', ''] },
        { time: '19:00~20:00', data: ['', '', '', '', ''] },
        { time: '20:00~21:00', data: ['', '', '', '', ''] },
        { time: '21:00~22:00', data: ['', '', '', '', ''] },
      ],
    };
  },
};
</script>

这里使用了一个 `tableData` 数组来存储数据，其中每个元素代表一行课程信息，包括时间和星期一到星期五的课程安排。在模板中使用 `v-for` 指令渲染表格，通过遍历 `tableData` 数组生成每一行的数据。