el-select用:value动态显示
时间: 2023-12-15 18:32:37 浏览: 42
可以使用`v-model`和`:value`属性来动态显示`el-select`的值。其中,`:value`属性用于绑定选项的值,`v-model`用于绑定选中的值。具体实现方法如下所示:
```html
<template>
<el-select v-model="selectedValue" :value="selectedValue">
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select>
</template>
<script>
export default {
data() {
return {
selectedValue: '', // 绑定选中的值
options: [ // 选项列表
{
label: '选项1',
value: 'option1'
},
{
label: '选项2',
value: 'option2'
},
{
label: '选项3',
value: 'option3'
}
]
}
}
}
</script>
```
在上述代码中,`selectedValue`用于绑定选中的值,`options`为选项列表。`:value`属性绑定了`selectedValue`,这样就可以动态显示`el-select`的值了。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)