vue选择一个框的数组的值改变另一个框的数组值

在Vue中，可以通过数据绑定和事件监听来实现一个选择框（如下拉选择框）的选中值改变另一个选择框的选项值。这通常可以通过计算属性（computed properties）或者方法（methods）来完成。以下是一个简单的例子：

假设我们有两个数组，一个是国家数组`countries`，另一个是根据选定国家动态变化的城市数组`cities`。

data() {
  return {
    selectedCountry: '', // 用于存储选定的国家
    countries: ['中国', '美国', '日本'],
    cities: [] // 初始为空数组，将根据选定的国家动态变化
  }
},
methods: {
  // 当国家选择框的值改变时，更新城市数组
  updateCities() {
    switch (this.selectedCountry) {
      case '中国':
        this.cities = ['北京', '上海', '广州'];
        break;
      case '美国':
        this.cities = ['纽约', '洛杉矶', '芝加哥'];
        break;
      case '日本':
        this.cities = ['东京', '大阪', '名古屋'];
        break;
      default:
        this.cities = []; // 如果没有选择国家，则清空城市数组
    }
  }
}

在模板中，我们需要为国家选择框绑定`v-model`到`selectedCountry`，并且监听`change`事件来调用`updateCities`方法：

<div>
  <select v-model="selectedCountry" @change="updateCities">
    <option disabled value="">请选择国家</option>
    <option v-for="country in countries" :key="country" :value="country">
      {{ country }}
    </option>
  </select>
</div>
<div>
  <select v-model="selectedCity">
    <option disabled value="">请选择城市</option>
    <option v-for="city in cities" :key="city" :value="city">
      {{ city }}
    </option>
  </select>
</div>

在这个例子中，当用户在国家选择框中选择一个国家时，`updateCities`方法会被触发，根据选定的国家动态设置城市数组`cities`，并且城市选择框会自动更新为相应的城市列表。