用vue写一个车站买票页面

好的，我可以给您提供一个简单的车站买票页面的Vue示例代码。

在这个示例中，我们将创建一个简单的页面，用户可以在该页面上选择出发站点和目的站点，并选择乘客人数和座位类型，然后单击“购买”按钮进行购票。

HTML代码：

<div id="app">
  <h1>车站买票页面</h1>
  
  <label>出发站点:</label>
  <select v-model="selectedStart">
    <option v-for="station in stations" :value="station">{{ station }}</option>
  </select>
  
  <label>目的站点:</label>
  <select v-model="selectedEnd">
    <option v-for="station in stations" :value="station">{{ station }}</option>
  </select>
  
  <label>乘客人数:</label>
  <input type="number" v-model="passengerCount">
  
  <label>座位类型:</label>
  <select v-model="selectedSeat">
    <option v-for="seat in seats" :value="seat">{{ seat }}</option>
  </select>
  
  <button @click="buyTicket">购买</button>
</div>

JavaScript代码：

new Vue({
  el: '#app',
  data: {
    stations: ['北京', '上海', '广州', '深圳', '武汉', '成都'],
    seats: ['硬座', '软座', '硬卧', '软卧'],
    selectedStart: '',
    selectedEnd: '',
    passengerCount: 1,
    selectedSeat: ''
  },
  methods: {
    buyTicket: function() {
      alert(`您已购买 ${this.selectedStart} 到 ${this.selectedEnd} 的 ${this.selectedSeat} 车票，乘客人数为 ${this.passengerCount}。`);
    }
  }
});

这个示例中，我们使用Vue的数据绑定功能，将页面上的各个元素与Vue实例中的数据属性相绑定。当用户选择出发站点、目的站点、乘客人数和座位类型时，相应的Vue数据属性会自动更新。当用户单击“购买”按钮时，将调用buyTicket方法，该方法会弹出一个提示框，显示用户购票信息。

请注意，这只是一个简单的示例代码，实际的车站买票页面可能需要更复杂的逻辑和样式。但是，这个示例可以帮助您了解如何在Vue中实现数据绑定和事件处理。