vue两个下拉框联动

实现两个下拉框联动的方法有很多，以下是一个基于 Vue 的示例：

HTML 代码：

<div id="app">
  <label for="province">省份：</label>
  <select id="province" v-model="selectedProvince">
    <option v-for="province in provinces" :value="province">{{ province }}</option>
  </select>
  <label for="city">城市：</label>
  <select id="city" v-model="selectedCity">
    <option v-for="city in cities" :value="city">{{ city }}</option>
  </select>
</div>

JavaScript 代码：

new Vue({
  el: '#app',
  data: {
    provinces: ['北京', '上海', '广东'],
    cities: {
      '北京': ['北京市'],
      '上海': ['上海市'],
      '广东': ['广州市', '深圳市', '珠海市']
    },
    selectedProvince: '',
    selectedCity: ''
  },
  watch: {
    selectedProvince: function(val) {
      this.selectedCity = '';
    }
  },
  computed: {
    filteredCities: function() {
      return this.cities[this.selectedProvince];
    }
  }
});

代码解释：

1. `provinces` 是一个数组，存储所有省份的名称。
2. `cities` 是一个对象，存储每个省份对应的城市数组。
3. `selectedProvince` 和 `selectedCity` 是两个双向绑定的变量，分别表示当前选中的省份和城市。
4. 在 `watch` 选项中，当 `selectedProvince` 发生变化时，将 `selectedCity` 置空，以防止用户选择了一个省份后，城市下拉框中还显示上一个省份的城市。
5. 在 `computed` 选项中，使用 `selectedProvince` 获取当前选中的省份对应的城市数组，存储在 `filteredCities` 中，用于在城市下拉框中显示正确的选项。
6. 在 HTML 中，使用 `v-for` 指令遍历 `provinces` 和 `filteredCities` 数组，动态生成省份和城市下拉框中的选项。
7. 在省份和城市下拉框中，使用 `v-model` 指令将选中的值与 `selectedProvince` 和 `selectedCity` 双向绑定，以实现联动效果。