element ui selsect值0,1,2,3,4转换成北京,内蒙,上海,深圳后传到input
时间: 2024-05-16 15:16:30 浏览: 48
02_test_selsect_waitvj4_多客户端;服务端;TCP;select_
可以使用 element ui 的 el-select 组件的 change 事件来监听用户的选择,然后将选中的值转换成对应的城市名称,最后将城市名称传递给 el-input 组件进行显示。
示例代码如下:
```html
<template>
<div>
<el-select v-model="selectedValue" @change="handleChange">
<el-option :value="0">北京</el-option>
<el-option :value="1">内蒙</el-option>
<el-option :value="2">上海</el-option>
<el-option :value="3">深圳</el-option>
</el-select>
<el-input v-model="cityName" />
</div>
</template>
<script>
export default {
data() {
return {
selectedValue: 0,
cityName: '',
};
},
methods: {
handleChange() {
switch (this.selectedValue) {
case 0:
this.cityName = '北京';
break;
case 1:
this.cityName = '内蒙';
break;
case 2:
this.cityName = '上海';
break;
case 3:
this.cityName = '深圳';
break;
default:
this.cityName = '';
}
},
},
};
</script>
```
在上面的示例中,我们使用 el-select 组件来让用户选择城市,然后将用户选择的值绑定到 selectedValue 变量中。同时,我们监听了 el-select 组件的 change 事件,在用户选择城市后,会调用 handleChange 方法。在 handleChange 方法中,我们使用 switch 语句将选中的值转换成对应的城市名称,并将城市名称绑定到 cityName 变量中,最后将 cityName 变量绑定到 el-input 组件中,以显示用户选择的城市名称。
阅读全文