Vue框架实现省市二级联动菜单：代码详解与功能剖析

```html <template> <div> <select v-model="selectedProvince" @change="handleProvinceChange"> <option value="">请选择省份</option> <option v-for="province in provinces" :key="province" :value="province">{{ province }}</option> </select> <select v-model="selectedCity" :disabled="cities.length === 0"> <option value="">请选择城市</option> <option v-for="city in cities" :key="city" :value="city">{{ city }}</option> </select> </div> </template> <script> export default { data() { return { provinces: ['北京', '上海', '广东'], cities: { '北京': ['北京市'], '上海': ['上海市'], '广东': ['广州市', '深圳市'] }, selectedProvince: '', selectedCity: '' }; }, methods: { handleProvinceChange() { if (this.selectedProvince) { this.selectedCity = ''; } } }, watch: { selectedProvince(newVal) { if (newVal) { this.cities = this.cities[newVal]; } else { this.cities = []; } } } }; </script> <style scoped> select { margin-right: 10px; } </style> ``` 在上面的代码中，我们定义了一个包含省市联动菜单的Vue组件。其中，provinces数组存储了所有省份的名称，cities对象存储了每个省份对应的城市数组。selectedProvince和selectedCity用来记录用户选择的省份和城市。在模板中，我们使用两个select元素分别展示省份和城市的下拉菜单。当选择省份时，通过change事件触发handleProvinceChange方法，重置选中的城市。通过watch属性监听selectedProvince的变化，并根据选择的省份更新城市下拉菜单的选项。在样式中，使用scoped属性来将样式限定在当前组件范围内。 ######[AI写代码神器 | 1081点数解答 | 2024-11-30 19:26:43]