vue3+ts+vite 监听option
时间: 2023-08-19 14:04:06 浏览: 46
如果您想要在 Vue3 中监听 option 的变化,可以使用 `watch` API 监听选项的变化。具体操作如下:
1. 在组件的 `data` 函数中定义一个选项,并初始化其值:
```typescript
import { defineComponent, reactive } from 'vue';
export default defineComponent({
name: 'MyComponent',
setup() {
const state = reactive({
selectedOption: '',
});
return {
state,
}
},
});
```
2. 在 `watch` 函数中监听选项的变化:
```typescript
import { defineComponent, reactive, watch } from 'vue';
export default defineComponent({
name: 'MyComponent',
setup() {
const state = reactive({
selectedOption: '',
});
// 监听选项变化
watch(() => state.selectedOption, (newVal, oldVal) => {
console.log(`选项从 ${oldVal} 变为 ${newVal}`);
});
return {
state,
}
},
});
```
上面的代码中,我们使用 `watch` 监听了 `selectedOption` 的变化,并在变化时输出了变化的前后值。
如果您想要监听选项在 DOM 中的变化,可以使用 `@change` 事件来监听。具体操作如下:
1. 在模板中使用 select 元素,并绑定 `v-model` 指令:
```html
<template>
<div>
<select v-model="selectedOption" @change="handleChange">
<option value="">请选择</option>
<option value="1">选项一</option>
<option value="2">选项二</option>
<option value="3">选项三</option>
</select>
</div>
</template>
```
2. 在组件的 `methods` 中定义 `handleChange` 函数,并在其中处理选项变化:
```typescript
import { defineComponent, reactive } from 'vue';
export default defineComponent({
name: 'MyComponent',
setup() {
const state = reactive({
selectedOption: '',
});
// 处理选项变化
const handleChange = (event: Event) => {
const target = event.target as HTMLSelectElement;
console.log(`选项从 ${state.selectedOption} 变为 ${target.value}`);
state.selectedOption = target.value;
}
return {
state,
handleChange,
}
},
});
```
上面的代码中,我们在 select 元素上绑定了 `@change` 事件,并在 `handleChange` 函数中处理了选项的变化。同时,我们在 `handleChange` 函数中也输出了选项变化的前后值。