### 回答1:
二级联动的实现需要使用Vue.js框架中的v-model和watch属性,下面是一个简单的示例代码:
HTML代码:
```
<div id="app">
<label>选择省份:</label>
<select v-model="selectedProvince">
<option v-for="province in provinces" :value="province">{{ province }}</option>
</select>
<br>
<label>选择城市:</label>
<select v-model="selectedCity">
<option v-for="city in cities" :value="city">{{ city }}</option>
</select>
</div>
```
Vue.js代码:
```
new Vue({
el: '#app',
data: {
selectedProvince: '',
selectedCity: '',
provinces: ['北京市', '上海市', '天津市', '重庆市'],
cities: {
'北京市': ['东城区', '西城区', '朝阳区', '海淀区'],
'上海市': ['黄浦区', '徐汇区', '长宁区', '静安区'],
'天津市': ['和平区', '河东区', '河西区', '南开区'],
'重庆市': ['渝中区', '江北区', '南岸区', '九龙坡区']
}
},
watch: {
selectedProvince: function (newProvince) {
this.selectedCity = '';
this.cities[newProvince][0];
}
}
})
```
在这个代码中,我们使用了两个下拉菜单,第一个下拉菜单用于选择省份,第二个下拉菜单用于选择城市。当用户选择省份时,watch属性会自动更新第二个下拉菜单中的城市列表。
### 回答2:
二级联动是指在一个下拉菜单选择一个选项后,另一个下拉菜单的选项内容会根据前一个选择的选项动态改变。下面是一个使用Vue实现二级联动的示例代码:
HTML部分:
```html
<div id="app">
<select v-model="firstLevel" @change="updateSecondLevel">
<option value="">请选择一级选项</option>
<option v-for="item in firstLevelOptions" :value="item">{{item}}</option>
</select>
<select v-model="secondLevel">
<option value="">请选择二级选项</option>
<option v-for="item in secondLevelOptions" :value="item">{{item}}</option>
</select>
</div>
```
JavaScript部分:
```javascript
new Vue({
el: '#app',
data: {
firstLevel: '',
secondLevel: '',
firstLevelOptions: ['选项A', '选项B', '选项C'],
secondLevelOptions: [],
mappings: {
'选项A': ['A选项1', 'A选项2', 'A选项3'],
'选项B': ['B选项1', 'B选项2', 'B选项3'],
'选项C': ['C选项1', 'C选项2', 'C选项3'],
}
},
methods: {
updateSecondLevel() {
this.secondLevelOptions = this.mappings[this.firstLevel] || [];
this.secondLevel = '';
}
}
});
```
上述代码中,通过设置`v-model`指令绑定选项的值,使用`@change`事件监听一级选项的变化,并调用`updateSecondLevel`方法更新二级选项的内容。在`updateSecondLevel`方法中,根据一级选项的值找到对应的二级选项,并将其赋值给`secondLevelOptions`,同时将二级选项的值重置为空。
在实际使用时,你可以根据需要修改`firstLevelOptions`和`mappings`数据,并可以通过CSS样式优化下拉菜单的显示效果。
### 回答3:
Vue二级联动实现代码如下:
```html
<template>
<div>
<select v-model="selectedCountry" @change="onCountryChange">
<option disabled value="">请选择国家</option>
<option v-for="country in countries" :key="country.id" :value="country.id">{{ country.name }}</option>
</select>
<select v-model="selectedCity" :disabled="!selectedCountry" @change="onCityChange">
<option disabled value="">请选择城市</option>
<option v-for="city in cities" :key="city.id" :value="city.id">{{ city.name }}</option>
</select>
</div>
</template>
<script>
export default {
data() {
return {
selectedCountry: '',
selectedCity: '',
countries: [
{ id: 1, name: '中国' },
{ id: 2, name: '美国' }
],
cities: [
{ id: 1, name: '北京', countryId: 1 },
{ id: 2, name: '上海', countryId: 1 },
{ id: 3, name: '纽约', countryId: 2 },
{ id: 4, name: '洛杉矶', countryId: 2 }
]
}
},
methods: {
onCountryChange() {
// 根据选择的国家,过滤对应的城市
this.selectedCity = '';
this.cities = this.cities.filter(city => city.countryId === this.selectedCountry);
},
onCityChange() {
// 获取选择的城市
console.log(this.selectedCity);
}
}
}
</script>
```
上述代码实现了一个简单的二级联动选择框,包含一个国家选择框和一个城市选择框。首先,使用`v-model`指令绑定`selectedCountry`和`selectedCity`变量,分别表示当前选中的国家和城市。接着,在国家选择框中,使用`v-for`指令遍历`countries`数组,生成对应的选项,并通过`@change`事件监听选择变化,调用`onCountryChange`方法。`onCountryChange`方法会根据选择的国家,过滤出对应的城市,并将选择的城市重置为空。在城市选择框中,同样使用了`v-for`指令、`@change`事件和`v-model`指令,实现了选择城市的功能。最后,打印出选择的城市,可以根据具体需求进行后续操作。