用vue3写一个飞机座位图

好的，我能为你提供一些基本的 Vue3 代码示例，用于创建一个基本的飞机座位图：

<template>
  <div class="plane-seat-map">
    <div class="plane-seats-row" v-for="row in rows" :key="row">
      <div class="plane-seat" v-for="(seat, index) in seatsPerRow" :key="`${row}${index}`">
        {{ seat }}
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        rows: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J'],
        seatsPerRow: 6,
      }
    }
  }
</script>

<style scoped>
  .plane-seat-map {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
  }

  .plane-seats-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
  }

  .plane-seat {
    background-color: #ccc;
    width: 30px;
    height: 30px;
    margin-left: 10px;
    margin-right: 10px;
  }
</style>

这段代码将创建一个基本的飞机座位图，其中包含从 A 到 J 的10个座位行和每行6个座位。你可以根据需要修改座位行和每行座位数，并在 CSS 中对座位进行样式调整。希望对你有所帮助！