bookingcom网站 酒店预订页您是为谁预订选择后下面房型那一栏显示的内容不一样Vue实现代码

由于缺乏详细的细节和代码示例，我不能提供准确的代码实现，但是我可以提供一些思路来实现这样的功能。

1. 创建一个Vue组件，其中包括一个下拉列表，以供用户选择他们是谁预订的酒店。可以使用Vue的v-model指令来绑定选择的值。

2. 创建另一个Vue组件，用于显示酒店列表和房型。这个组件将使用v-if指令来检查用户选择的是谁预订酒店，并显示相应的房型。

3. 在Vue实例中，将这两个组件添加到一个父组件中，并使用props将选择的值传递给子组件。

4. 在子组件中，使用计算属性来根据选择的值来过滤和显示相应的房型列表。

5. 最后，使用Vue的事件机制来监听房型的选择，并将所选房型的信息传递回父组件。父组件可以使用这些信息来完成酒店预订的过程。

下面是一个示例伪代码，用于说明如何实现这样的功能：

<!-- 父组件 -->
<template>
  <div>
    <booking-form v-model="bookingFor"></booking-form>
    <hotel-list :bookingFor="bookingFor"></hotel-list>
  </div>
</template>

<script>
  import BookingForm from './BookingForm.vue';
  import HotelList from './HotelList.vue';

  export default {
    components: {
      BookingForm,
      HotelList
    },
    data() {
      return {
        bookingFor: ''
      }
    }
  }
</script>

<!-- BookingForm 组件 -->
<template>
  <div>
    <label>你是为谁预订酒店？</label>
    <select v-model="selected">
      <option value="">请选择</option>
      <option value="自己">自己</option>
      <option value="朋友">朋友</option>
      <option value="家人">家人</option>
    </select>
  </div>
</template>

<script>
  export default {
    props: {
      value: String
    },
    data() {
      return {
        selected: this.value
      }
    },
    watch: {
      selected(newValue) {
        this.$emit('input', newValue);
      }
    }
  }
</script>

<!-- HotelList 组件 -->
<template>
  <div>
    <h2>可用酒店</h2>
    <ul>
      <li v-for="hotel in filteredHotels" :key="hotel.id">
        <h3>{{ hotel.name }}</h3>
        <ul>
          <li v-for="room in hotel.rooms" :key="room.id">
            <h4>{{ room.name }}</h4>
            <button @click="selectRoom(room)">选择房型</button>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</template>

<script>
  export default {
    props: {
      bookingFor: String
    },
    data() {
      return {
        hotels: [
          {
            id: 1,
            name: '酒店1',
            rooms: [
              { id: 1, name: '标准间', capacity: 2, available: true },
              { id: 2, name: '豪华间', capacity: 2, available: true },
              { id: 3, name: '家庭套房', capacity: 4, available: false }
            ]
          },
          {
            id: 2,
            name: '酒店2',
            rooms: [
              { id: 4, name: '标准间', capacity: 2, available: true },
              { id: 5, name: '高级套房', capacity: 2, available: false },
              { id: 6, name: '家庭套房', capacity: 4, available: true }
            ]
          }
        ]
      }
    },
    computed: {
      filteredHotels() {
        if (this.bookingFor === '自己') {
          return this.hotels.filter(hotel => hotel.rooms.some(room => room.available));
        } else if (this.bookingFor === '朋友') {
          return this.hotels.filter(hotel => hotel.rooms.some(room => room.capacity >= 2 && room.available));
        } else if (this.bookingFor === '家人') {
          return this.hotels.filter(hotel => hotel.rooms.some(room => room.capacity >= 4 && room.available));
        } else {
          return [];
        }
      }
    },
    methods: {
      selectRoom(room) {
        this.$emit('room-selected', room);
      }
    }
  }
</script>
``