vue 两个下拉框联动

用 Vue 实现两个下拉框联动，可以使用 Vue 的 v-model 和 watch 来实现。首先，在父组件中定义两个 select 标签，并通过 v-model 绑定变量。然后，在 watch 监听中定义改变时要执行的操作，该操作会改变另一个 select 标签的值。

相关问题

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` 双向绑定，以实现联动效果。

vue 两个下拉框实现联动的代码怎么写

Vue 中实现双下拉框联动的代码大致如下：1. 在 Vue 实例中定义相关变量：data () {
return {
select1: '',
select2: '',
options1: [],
options2: []
}
},2. 在 methods 中定义变量变更函数：methods: {
change1 (val) {
// 根据 select1 的值来更新 select2 的值
this.select2 = ''
this.options2 = this.getOptions2(val)
},
change2 (val) {
// 根据 select2 的值来更新 select1 的值
this.select1 = ''
this.options1 = this.getOptions1(val)
}
}3. 在 watch 中监听变量变更：watch: {
select1 (val) {
this.change1(val)
},
select2 (val) {
this.change2(val)
}
}