vue实现省市二级联动
时间: 2023-05-18 15:06:10 浏览: 76
可以使用vue的v-model和v-for指令实现省市二级联动。首先,定义一个包含省市数据的数组,然后使用v-for指令将省份列表渲染到页面上。当用户选择一个省份时,使用v-model指令将选中的省份绑定到数据模型中,并根据选中的省份动态渲染该省份下的城市列表。最后,用户选择一个城市时,使用v-model指令将选中的城市绑定到数据模型中。
以下是一个简单的示例代码:
```
<template>
<div>
<select v-model="selectedProvince">
<option v-for="province in provinces" :value="province">{{ province }}</option>
</select>
<<select v-model="selectedCity">
<option v-for="city in cities" :value="city">{{ city }}</option>
</select>
</div>
</template>
<script>
export default {
data() {
return {
provinces: ['北京', '上海', '广东'],
cities: {
'北京': ['北京市'],
'上海': ['上海市'],
'广东': ['广州市', '深圳市', '珠海市']
},
selectedProvince: '',
selectedCity: ''
}
},
watch: {
selectedProvince: function(val) {
this.selectedCity = '';
this.cities[val].forEach(city => {
this.selectedCity = city;
});
}
}
}
</script>
```