vue项目如何实现不同的教室展示不同的座位

要实现不同的教室展示不同的座位，可以通过Vue中的数据绑定和条件渲染来实现。以下是一个简单的示例：

HTML代码：

<template>
  <div>
    <div v-if="classroom === 'A'">
      <div v-for="seat in seatsA" :key="seat.id" class="seat" :class="{ occupied: seat.occupied }">
        <input type="checkbox" :id="'seat-' + seat.id" :disabled="seat.occupied" />
        <label :for="'seat-' + seat.id">{{ seat.name }}</label>
      </div>
    </div>
    <div v-else-if="classroom === 'B'">
      <div v-for="seat in seatsB" :key="seat.id" class="seat" :class="{ occupied: seat.occupied }">
        <input type="checkbox" :id="'seat-' + seat.id" :disabled="seat.occupied" />
        <label :for="'seat-' + seat.id">{{ seat.name }}</label>
      </div>
    </div>
    <!-- 其他教室 -->
  </div>
</template>

JS代码：

<script>
export default {
  data() {
    return {
      classroom: 'A', // 默认展示教室A的座位
      seatsA: [ // 教室A的座位数组
        { id: 1, name: '1', occupied: false },
        { id: 2, name: '2', occupied: true },
        // 其他座位
      ],
      seatsB: [ // 教室B的座位数组
        { id: 1, name: '1', occupied: false },
        { id: 2, name: '2', occupied: false },
        // 其他座位
      ],
      // 其他教室的座位数组
    }
  },
}
</script>

解释：

首先，在data中定义了classroom、seatsA和seatsB三个属性。classroom表示当前展示的教室，seatsA和seatsB分别表示教室A和教室B的座位数组。

在HTML中，使用v-if和v-else-if指令来根据当前的classroom展示不同的座位。在每个教室的div容器中，使用v-for指令遍历对应的座位数组，并根据每个座位的occupied属性来控制是否禁用checkbox。occupied为true表示座位被占用，checkbox将被禁用。

在label标签中，使用动态绑定来设置for属性的值，以便与对应的checkbox关联。在class属性中，使用对象语法来动态绑定occupied属性，以便根据座位的占用状态来添加occupied类，以便在CSS中设置样式。

这样，当用户选择不同的教室时，Vue会根据classroom的值来渲染对应的座位。