用vue 写两个select下拉框联动 给我写个模板

很高兴为你回答这个问题。假设有两个下拉框，一个叫selectA，另一个叫selectB，可以使用Vue来实现两个下拉框的联动，具体代码如下： <template>
<div>
<select v-model="selectedA">
<option v-for="option in optionsA" :value="option.value">
{{ option.text }}
</option>
</select>
<select v-model="selectedB">
<option v-for="option in optionsB" :value="option.value">
{{ option.text }}
</option>
</select>
</div>
</template> <script>
export default {
data() {
return {
selectedA: null,
selectedB: null,
optionsA: [
{ value: 'optionA1', text: 'Option A1' },
{ value: 'optionA2', text: 'Option A2' },
],
optionsB: [
{ value: 'optionB1', text: 'Option B1' },
{ value: 'optionB2', text: 'Option B2' },
{ value: 'optionB3', text: 'Option B3' },
],
};
},
watch: {
selectedA(val) {
if (val === 'optionA1') {
this.optionsB = [
{ value: 'optionB1', text: 'Option B1' },
{ value: 'optionB2', text: 'Option B2' },
];
} else if (val === 'optionA2') {
this.optionsB = [
{ value: 'optionB2', text: 'Option B2' },
{ value: 'optionB3', text: 'Option B3' },
];
}
},
},
};
</script>