博客

例如如下数据：

resultTime: [
  { week: "星期三", times: ["9:00~10:30", "10:00~11:00"] },
  { week: "星期一", times: ["10:00~11:00", "11:00~12:00"] },
  { week: "星期五", times: ["14:30~15:30"] },
  { week: "星期四", times: ["8:30~11:30", "11:30~12:00", "11:30~12:00"] },
],

我们要让它在页面中以如下顺序展示：

思路：利用两层for循环，第一层for循环判断它是否为我们想要的顺序，第二次for循环展示数据。

根据判断利用v-if来切换数据是否显示。

<template>
  <div>
    <table
      width="690px"
      style="text-align: center"
      cellspacing="0"
      cellpadding="10"
      border="1"
    >
      <tr>
        <template v-for="item in weeks">
          <template v-for="(p, i) in resultTime">
            <td width="100px" :key="i" v-if="p.week == item">{{ p.week }}</td>
          </template>
        </template>
      </tr>
      <tr class="ljgc">
        <template v-for="item in weeks">
          <template v-for="(p, i) in resultTime">
            <td width="100px" :key="i" v-if="p.week == item">
              <ul>
                <li v-for="(p2, i2) in p.times" :key="i2">{{ p2 }}</li>
              </ul>
            </td>
          </template>
        </template>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  name: "Home",
  data() {
    return {
      weeks: [
        "星期一",
        "星期二",
        "星期三",
        "星期四",
        "星期五",
        "星期六",
        "星期天",
      ],
      resultTime: [
        { week: "星期三", times: ["9:00~10:30", "10:00~11:00"] },
        { week: "星期一", times: ["10:00~11:00", "11:00~12:00"] },
        { week: "星期五", times: ["14:30~15:30"] },
        { week: "星期四", times: ["8:30~11:30", "11:30~12:00", "11:30~12:00"] },
      ],
    };
  },
};
</script>

<style lang="less" scoped>
.ljgc {
  ul {
    list-style: none;
    padding: 0;
  }
}
</style>

最后：其实这个方法挺消耗内存的，代码看起来也不美观。如果有更好的方法，欢迎在评论区留言。