vue 省市县三级联动

Vue 省市县三级联动是一种常见的前端开发需求，可以通过以下步骤实现：

1. 创建省、市、县的数据源：可以使用数组、JSON 对象或者从后端获取数据。数据源包含省份、城市和区县的信息。

2. 在 Vue 组件中，定义三个变量来存储选择的省、市、县信息，例如 `selectedProvince`、`selectedCity` 和 `selectedCounty`。

3. 在模板中创建三个下拉选择框，分别绑定到对应的变量上，并使用 `v-model` 来实现双向绑定。

4. 监听省份选择框的变化，当选中省份时，根据选中的省份从数据源中获取对应的城市列表，并更新市级下拉选择框的选项列表。

5. 监听城市选择框的变化，当选中城市时，根据选中的城市从数据源中获取对应的区县列表，并更新县级下拉选择框的选项列表。

下面是一个简单的示例代码：

<template>
  <div>
    <select v-model="selectedProvince" @change="onProvinceChange">
      <option value="">请选择省份</option>
      <option v-for="province in provinces" :value="province">{{ province }}</option>
    </select>
    <select v-model="selectedCity" @change="onCityChange">
      <option value="">请选择城市</option>
      <option v-for="city in cities" :value="city">{{ city }}</option>
    </select>
    <select v-model="selectedCounty">
      <option value="">请选择区县</option>
      <option v-for="county in counties" :value="county">{{ county }}</option>
    </select>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedProvince: '',
      selectedCity: '',
      selectedCounty: '',
      provinces: ['省份1', '省份2', ...], // 替换为实际的省份数据
      cities: [],
      counties: []
    };
  },
  methods: {
    onProvinceChange() {
      // 根据选中的省份获取对应的城市列表
      // 可以根据实际情况使用过滤、请求后端数据等方式获取城市列表
      this.cities = this.getCityListByProvince(this.selectedProvince);
      
      // 重置市级和县级选择框的值
      this.selectedCity = '';
      this.selectedCounty = '';
    },
    onCityChange() {
      // 根据选中的城市获取对应的县级列表
      // 可以根据实际情况使用过滤、请求后端数据等方式获取县级列表
      this.counties = this.getCountyListByCity(this.selectedCity);
      
      // 重置县级选择框的值
      this.selectedCounty = '';
    },
    getCityListByProvince(province) {
      // 根据选中的省份获取对应的城市列表的逻辑
      // 返回城市列表数组
    },
    getCountyListByCity(city) {
      // 根据选中的城市获取对应的县级列表的逻辑
      // 返回县级列表数组
    }
  }
};
</script>

以上代码只是一个简单的示例，实际情况中需要根据具体需求进行适当调整。同时，该示例只包含了静态数据的处理，如果需要从后端获取数据，则需要相应的接口调用和异步处理。希望以上内容能帮到你！