vue点击切换按钮切换出发城市和到达城市

可以使用Vue的数据绑定和事件绑定来实现点击切换按钮切换出发城市和到达城市的功能。

1. 在Vue的data中定义两个属性，分别为出发城市和到达城市的初始值；
2. 在HTML中通过Vue的数据绑定将出发城市和到达城市显示出来；
3. 在HTML中添加一个按钮，并通过Vue的事件绑定将点击事件绑定到一个方法上；
4. 在方法中通过Vue的数据绑定和临时变量来实现出发城市和到达城市的交换。

示例代码：

HTML：

<div id="app">
  <p>出发城市：{{ departureCity }}</p>
  <p>到达城市：{{ arrivalCity }}</p>
  <button @click="switchCities">切换城市</button>
</div>

JavaScript：

new Vue({
  el: '#app',
  data: {
    departureCity: '北京',
    arrivalCity: '上海'
  },
  methods: {
    switchCities: function() {
      var temp = this.departureCity;
      this.departureCity = this.arrivalCity;
      this.arrivalCity = temp;
    }
  }
});

当用户点击切换城市按钮时，会触发switchCities方法，该方法会将出发城市和到达城市的值进行交换，从而实现点击切换按钮切换出发城市和到达城市的效果。