在前端开发中，下拉菜单的二级联动是一个常见的需求，尤其是在表单设计中。今天就来分享如何用 Vue.js 实现一个简单的二级联动下拉菜单！🚀
首先，在你的 HTML 文件中创建两个 `
```html
```
接着，在 Vue 的 `data` 中定义数据：
```javascript
data() {
return {
selectedProvince: '',
selectedCity: '',
provinces: [
{ id: '1', name: '北京' },
{ id: '2', name: '上海' }
],
cities: []
};
}
```
然后，添加方法 `fetchCities` 来动态加载城市列表：
```javascript
methods: {
fetchCities() {
const provinceId = this.selectedProvince;
if (provinceId) {
// 模拟异步请求
setTimeout(() => {
this.cities = [
{ id: '1-1', name: '朝阳区' },
{ id: '1-2', name: '海淀区' }
];
}, 500);
} else {
this.cities = [];
}
}
}
```
这样，当你选择省份时，城市列表会自动更新！✨
通过这个小例子，你可以轻松扩展到更复杂的数据结构和场景。快去试试吧！💪