使用vue写出预约功能的列表，预约格变色

好的，我可以为你提供一个简单的实现方案。

首先，我们需要一个列表组件，可以使用`<table>`标签来实现。在每个预约格中，我们可以使用`<td>`标签，并且为其添加一个类名来表示其预约状态。

然后，在Vue组件中，我们可以使用一个数组来存储所有的预约信息，并且使用`v-for`指令来遍历这个数组，生成每一个预约格。

最后，我们可以通过监听每个预约格的点击事件，来修改其预约状态，并且使用`v-bind:class`指令来动态绑定其类名，从而实现预约格变色的效果。

下面是一个简单的实现代码示例：

<template>
  <table>
    <tr>
      <th>时间</th>
      <th>预约状态</th>
    </tr>
    <tr v-for="(item, index) in appointments" :key="index">
      <td>{{ item.time }}</td>
      <td :class="{ 'reserved': item.reserved }" @click="reserve(index)">
        {{ item.reserved ? '已预约' : '可预约' }}
      </td>
    </tr>
  </table>
</template>

<script>
export default {
  data() {
    return {
      appointments: [
        { time: '9:00', reserved: false },
        { time: '10:00', reserved: false },
        { time: '11:00', reserved: true },
        { time: '12:00', reserved: false },
        { time: '13:00', reserved: false },
        { time: '14:00', reserved: true },
        { time: '15:00', reserved: false },
        { time: '16:00', reserved: false }
      ]
    }
  },
  methods: {
    reserve(index) {
      this.appointments[index].reserved = !this.appointments[index].reserved
    }
  }
}
</script>

<style>
.reserved {
  background-color: red;
  color: white;
}
</style>

在上面的代码中，我们使用了一个`appointments`数组来存储所有的预约信息，每个预约信息包含一个时间和一个预约状态。在模板中，我们使用`v-for`指令遍历这个数组，并且使用`:class`指令来动态绑定预约格的类名。在样式中，我们为预约格的`reserved`类名设置了一个红色背景和白色文字颜色。

当用户点击一个预约格时，我们调用`reserve`方法来修改其预约状态。由于类名是动态绑定的，所以预约格的样式会自动更新，从而实现了预约格变色的效果。