vue怎么实现两个相同的下拉框选项互斥，且可以清空某一个下拉框

可以通过绑定`v-model`来实现两个下拉框的互斥。当其中一个下拉框选中某个选项时，另外一个下拉框就需要将该选项禁用。

例如，我们有两个下拉框，分别是`select1`和`select2`，它们都有相同的选项：

<select v-model="selected1" @change="handleSelectChange">
  <option value="">请选择</option>
  <option value="A">A</option>
  <option value="B">B</option>
  <option value="C">C</option>
</select>

<select v-model="selected2" @change="handleSelectChange">
  <option value="">请选择</option>
  <option value="A">A</option>
  <option value="B">B</option>
  <option value="C">C</option>
</select>

然后在`data`中定义`selected1`和`selected2`，以及一个数组`disabledOptions`用来存储需要禁用的选项：

data() {
  return {
    selected1: '',
    selected2: '',
    disabledOptions: []
  }
}

接下来，在`methods`中定义`handleSelectChange`方法，用来处理下拉框选项的变化。当其中一个下拉框选中某个选项时，另外一个下拉框就需要将该选项禁用。同时，如果某个下拉框被清空了，就需要将其它下拉框中对应的选项解禁。

methods: {
  handleSelectChange() {
    if (this.selected1 && this.selected2) {
      // 如果两个下拉框都有选项被选中，则需要互斥
      if (this.selected1 === this.selected2) {
        // 如果选中的选项相同，则需要禁用另外一个下拉框中的该选项
        this.disabledOptions = [this.selected1]
      } else {
        // 如果选中的选项不同，则需要将所有选项都解禁
        this.disabledOptions = []
      }
    } else {
      // 如果某个下拉框被清空了，则需要将另外一个下拉框中对应的选项解禁
      if (!this.selected1) {
        this.disabledOptions = [this.selected2]
      } else {
        this.disabledOptions = [this.selected1]
      }
    }
  }
}

最后，在`select`标签中绑定`disabled`属性，用来禁用选项：

<select v-model="selected1" @change="handleSelectChange">
  <option value="">请选择</option>
  <option v-for="option in ['A', 'B', 'C']" :value="option" :disabled="disabledOptions.includes(option)">
    {{ option }}
  </option>
</select>

<select v-model="selected2" @change="handleSelectChange">
  <option value="">请选择</option>
  <option v-for="option in ['A', 'B', 'C']" :value="option" :disabled="disabledOptions.includes(option)">
    {{ option }}
  </option>
</select>

这样，当一个下拉框选中某个选项时，另外一个下拉框就会将该选项禁用。同时，如果某个下拉框被清空了，就会将另外一个下拉框中对应的选项解禁。