vue 两个下拉框实现联动的代码怎么写
时间: 2023-03-14 15:37:34 浏览: 182
vue组件实践之可搜索下拉框功能
Vue 中实现双下拉框联动的代码大致如下:1. 在 Vue 实例中定义相关变量:data () {
return {
select1: '',
select2: '',
options1: [],
options2: []
}
},2. 在 methods 中定义变量变更函数:methods: {
change1 (val) {
// 根据 select1 的值来更新 select2 的值
this.select2 = ''
this.options2 = this.getOptions2(val)
},
change2 (val) {
// 根据 select2 的值来更新 select1 的值
this.select1 = ''
this.options1 = this.getOptions1(val)
}
}3. 在 watch 中监听变量变更:watch: {
select1 (val) {
this.change1(val)
},
select2 (val) {
this.change2(val)
}
}
阅读全文