vue select关联

Vue中的select关联是通过使用v-model指令和v-for指令实现的。下面是一个基本的示例：

<template>
  <div>
    <label for="country">Country:</label>
    <select v-model="selectedCountry" id="country">
      <option v-for="country in countries" :key="country.id" :value="country.id">{{ country.name }}</option>
    </select>

    <label for="city">City:</label>
    <select v-model="selectedCity" id="city">
      <option v-for="city in getCitiesByCountry(selectedCountry)" :key="city.id" :value="city.id">{{ city.name }}</option>
    </select>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedCountry: null,
      selectedCity: null,
      countries: [
        { id: 1, name: 'USA' },
        { id: 2, name: 'Canada' },
        { id: 3, name: 'UK' }
      ],
      cities: [
        { id: 1, name: 'New York', countryId: 1 },
        { id: 2, name: 'Los Angeles', countryId: 1 },
        { id: 3, name: 'Toronto', countryId: 2 },
        { id: 4, name: 'Vancouver', countryId: 2 },
        { id: 5, name: 'London', countryId: 3 },
        { id: 6, name: 'Manchester', countryId: 3 }
      ]
    };
  },
  methods: {
    getCitiesByCountry(countryId) {
      return this.cities.filter(city => city.countryId === countryId);
    }
  }
};
</script>

在这个示例中，首先我们定义了两个select元素，一个用于选择国家，另一个用于选择城市。我们使用v-model指令将选中的值绑定到data属性中的selectedCountry和selectedCity。

接下来，我们使用v-for指令在select元素中循环遍历国家和城市的选项。每个选项都有一个唯一的key属性，并且将其值绑定到相应的country.id和city.id上。

在获取城市列表的方法getCitiesByCountry中，我们使用filter方法根据选中的国家ID筛选出对应的城市列表。

这样，当选择国家时，城市列表会自动更新为与所选国家相关的城市。