<!DOCTYPE html>
<html>
<head>
<title>城市选择</title>
<style>
.select-container {
display: inline-block;
margin-right: 10px;
}
</style>
</head>
<body>
<div id="app">
<div class="select-container">
<select v-model="selectedProvince" @change="onProvinceChange">
<option value="">请选择省份</option>
<option v-for="province in provinces" :value="province">{{ province }}</option>
</select>
</div>
<div class="select-container">
<select v-model="selectedCity" @change="onCityChange">
<option value="">请选择城市</option>
<option v-for="city in cities" :value="city">{{ city }}</option>
</select>
</div>
<div class="select-container">
<select v-model="selectedDistrict">
<option value="">请选择区域</option>
<option v-for="district in districts" :value="district">{{ district }}</option>
</select>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
<script>
new Vue({
el: '#app',
data: {
provinces: ['江西省', '浙江省', '江苏省'],
cities: {
'江西省': '南昌市',
'浙江省': '杭州市',
'江苏市': '南京市'
},
districts: {
'南昌市': ['东湖区', '西湖区', '青山湖区'],
'上海市': ['黄浦区', '徐汇区', '静安区'],
'北京市': ['东城区', '西城区', '朝阳区']
},
selectedProvince: '',
selectedCity: '',
selectedDistrict: ''
},
methods: {
onProvinceChange() {
this.selectedCity = '';
this.selectedDistrict = '';
},
onCityChange() {
this.selectedDistrict = '';
}
}
});
</script>
</body>
</html>