vue省市区三级联动 代码

Vue省市区三级联动是一种常见的前端开发需求，可以通过Vue框架来实现。以下是一个简单的示例代码：

<template>
  <div>
    <select v-model="selectedProvince" @change="handleProvinceChange">
      <option value="">请选择省份</option>
      <option v-for="province in provinces" :value="province">{{ province }}</option>
    </select>
    <select v-model="selectedCity" @change="handleCityChange">
      <option value="">请选择城市</option>
      <option v-for="city in cities" :value="city">{{ city }}</option>
    </select>
    <select v-model="selectedDistrict">
      <option value="">请选择区县</option>
      <option v-for="district in districts" :value="district">{{ district }}</option>
    </select>
  </div>
</template>

<script>
export default {
  data() {
    return {
      provinces: ['省份1', '省份2', '省份3'], // 省份数据
      cities: [], // 城市数据
      districts: [], // 区县数据
      selectedProvince: '', // 选中的省份
      selectedCity: '', // 选中的城市
      selectedDistrict: '' // 选中的区县
    };
  },
  methods: {
    handleProvinceChange() {
      // 根据选中的省份获取对应的城市数据
      // 这里可以通过接口请求或者其他方式获取数据
      // 假设获取到的城市数据为一个数组，存储在this.cities中
      this.cities = ['城市1', '城市2', '城市3'];
      this.selectedCity = ''; // 重置选中的城市
      this.districts = []; // 重置区县数据
      this.selectedDistrict = ''; // 重置选中的区县
    },
    handleCityChange() {
      // 根据选中的城市获取对应的区县数据
      // 这里可以通过接口请求或者其他方式获取数据
      // 假设获取到的区县数据为一个数组，存储在this.districts中
      this.districts = ['区县1', '区县2', '区县3'];
      this.selectedDistrict = ''; // 重置选中的区县
    }
  }
};
</script>

以上代码实现了一个简单的省市区三级联动功能。当选择省份时，会根据选中的省份获取对应的城市数据，并重置选中的城市和区县；当选择城市时，会根据选中的城市获取对应的区县数据，并重置选中的区县。