vue 3 select changeg事件参数

在 Vue 3 的 select 组件中，可以使用 `v-model` 指令来绑定选择的值。同时，也可以使用 `@change` 事件来处理当选择项变化时触发的事件。

`@change` 事件的回调函数会有一个事件参数 `$event`，该参数包含有关选择项变化的信息。

以下是 `$event` 对象中一些常用的属性：

- `$event.target`：当前 select 元素的 DOM 对象。
- `$event.target.value`：当前选择项的值。
- `$event.target.selectedIndex`：当前选择项的序号（从 0 开始）。
- `$event.target.options`：所有选项的 DOM 对象数组。

以下是一个使用 `@change` 事件的示例，当下拉框的值发生变化时，会将选择的值输出到控制台：

<template>
  <select v-model="selected" @change="handleSelectChange">
    <option value="">请选择</option>
    <option v-for="option in options" :value="option.value">{{ option.label }}</option>
  </select>
</template>

<script>
export default {
  data() {
    return {
      selected: '',
      options: [
        { label: '选项 1', value: 'option1' },
        { label: '选项 2', value: 'option2' },
        { label: '选项 3', value: 'option3' }
      ]
    };
  },
  methods: {
    handleSelectChange(event) {
      console.log(event.target.value);
    }
  }
}
</script>

在上面的代码中，我们在 select 组件上绑定了 `@change` 事件，并将回调函数命名为 `handleSelectChange`。在回调函数中，我们可以通过 `event.target.value` 属性获取当前选择的值，并将其输出到控制台。