Vue.js 中的 `@change` 事件处理程序：获取选中的 select 选项值

2024-03-05 03:41:43

在 Vue.js 中使用 @change 事件处理程序获取选中的 select 选项

引言

在开发交互式 web 应用程序时，经常需要处理用户的输入和选项选择。在 Vue.js 中，@change 事件处理程序提供了获取选中的 select 元素中选项值的方法。通过利用此处理程序，你可以根据用户选择的选项值执行特定的操作。

理解 `@change` 事件处理程序

@change 事件处理程序在用户更改 select 元素中的选项时触发。当触发该事件时，它会传递一个包含事件详细信息的对象作为参数。你可以使用此对象来访问选中的选项值和其他相关信息。

获取选中的选项值

要获取选中的选项值，请执行以下步骤：

获取事件目标： event.target 指向触发 @change 事件的元素。
类型转换： 将 event.target 转换为 HTMLSelectElement 类型，以便访问 value 属性。
获取选项值： 通过 (event.target as HTMLSelectElement).value 获取选中的选项值。

示例代码

以下 TypeScript 示例演示了如何在 Vue.js 中使用 @change 事件处理程序获取选中的选项值：

HTML 模板

<select @change="onChange">
  <option value="1">选项 1</option>
  <option value="2">选项 2</option>
</select>

TypeScript 组件

import { defineComponent } from "vue";

export default defineComponent({
  methods: {
    onChange(event: Event) {
      const selectedValue = (event.target as HTMLSelectElement).value;
      console.log(`选中的选项值为：${selectedValue}`);
    }
  }
});