Vue.js 获取 @change 事件选中的选项

在本文中，我们将介绍如何使用 Vue.js 获取 @change 事件中选中的选项。

什么是 Vue.js？

Vue.js 是一种用于构建用户界面的渐进式 JavaScript 框架。它专注于视图层，采用了组件化的开发方式，使得构建 Web 应用更加简单和高效。

@change 事件

在 Vue.js 中，@change 是一个常用的事件，它在用户改变输入值时触发。我们经常将 @change 事件应用在表单元素上，如下所示：

<template>
  <div>
    <select @change="handleChange">
      <option value="option1">选项1</option>
      <option value="option2">选项2</option>
      <option value="option3">选项3</option>
    </select>
  </div>
</template>

上面的代码创建了一个选择框，当用户选择其中一个选项时，@change 事件将会触发，并调用 handleChange 方法。

获取选中的选项

要获取 @change 事件选中的选项，我们可以通过 event.target.value 来实现。下面是一个完整的示例：

<template>
  <div>
    <select @change="handleChange">
      <option value="option1">选项1</option>
      <option value="option2">选项2</option>
      <option value="option3">选项3</option>
    </select>
    <p>选中的选项是：{{ selectedOption }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedOption: ''
    }
  },
  methods: {
    handleChange(event) {
      this.selectedOption = event.target.value;
    }
  }
}
</script>

上面的代码中，selectedOption 是一个响应式的数据属性，它用来保存选中的选项。在 handleChange 方法中，我们通过 event.target.value 获取用户选择的值，并将其赋值给 selectedOption。

当用户选中某个选项时，视图中的 {{ selectedOption }} 将会更新，显示选中的选项。

处理多个 @change 事件

如果在同一个页面中有多个 @change 事件，我们可以为每个事件定义一个独立的方法。下面是一个示例：

<template>
  <div>
    <select @change="handleOption1Change">
      <option value="option1">选项1</option>
      <option value="option2">选项2</option>
      <option value="option3">选项3</option>
    </select>

    <select @change="handleOption2Change">
      <option value="option1">选项1</option>
      <option value="option2">选项2</option>
      <option value="option3">选项3</option>
    </select>
  </div>
</template>

<script>
export default {
  methods: {
    handleOption1Change(event) {
      console.log('选项1选择的值是：', event.target.value);
    },
    handleOption2Change(event) {
      console.log('选项2选择的值是：', event.target.value);
    }
  }
}
</script>

上面的代码中，有两个选择框，分别对应 handleOption1Change 和 handleOption2Change 方法。每个方法会在相应的选择框改变值时被调用，我们可以根据实际需求进行处理。