vue3.0 el-select change
时间: 2023-10-14 22:32:17 浏览: 258
在 Vue 3.0 中,`el-select` 组件的 `change` 事件可以通过 `v-model` 或者 `@change` 来监听。以下是一个示例:
```html
<template>
<el-select v-model="selectedValue" @change="handleSelectChange">
<el-option
v-for="option in options"
:key="option.value"
:label="option.label"
:value="option.value"
></el-option>
</el-select>
</template>
<script>
export default {
data() {
return {
selectedValue: '',
options: [
{ label: 'Option 1', value: 'option1' },
{ label: 'Option 2', value: 'option2' },
{ label: 'Option 3', value: 'option3' },
],
};
},
methods: {
handleSelectChange(value) {
console.log('Selected value:', value);
},
},
};
</script>
```
在上面的示例中,我们使用 `v-model` 来绑定 `selectedValue`,并通过 `@change` 监听 `change` 事件。当选择项发生变化时,`handleSelectChange` 方法会被调用,并输出选中的值到控制台。你可以根据实际需求进行相关处理。
阅读全文
相关推荐
![zip](https://img-home.csdnimg.cn/images/20241231045053.png)
![pdf](https://img-home.csdnimg.cn/images/20241231044930.png)
![pdf](https://img-home.csdnimg.cn/images/20241231044930.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)
![](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)