vue2获取下拉框的名字和值

在 Vue.js 中，如果你想要获取下拉框（select）的选择名称和对应的值，你可以通过 `v-model` 绑定双向数据以及监听 `change` 事件来实现。这里是一个基本的例子：

<template>
  <div>
    <select v-model="selectedValue">
      <option v-for="(item, index) in options" :key="index" :value="item.value">{{ item.name }}</option>
    </select>
    <p>选择的名称: {{ selectedValue.name }}，选择的值: {{ selectedValue.value }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedValue: {}, // 初始化选中的选项为空对象
      options: [
        { name: '选项一', value: 'opt1' },
        { name: '选项二', value: 'opt2' },
        // 更多选项...
      ]
    };
  },
  watch: {
    selectedValue(newVal) {
      console.log('新的选择：', newVal);
    }
  }
};
</script>

在这个例子中，`v-model="selectedValue"` 将用户的选择绑定到 `selectedValue` 数据上。当用户从下拉框中选择一个选项时，`options` 数组中的相应项会被赋给 `selectedValue`。同时，我们在模板中显示了所选的名称 (`{{ item.name }}`) 和值 (`{{ item.value }}`)。

如果你想在 `change` 事件触发时获取当前的选择，可以在组件内部添加这个事件处理器：

<select v-model="selectedValue" @change="handleSelectChange">

...

methods: {
  handleSelectChange(event) {
    const selectedOption = this.options.find(option => option.value === event.target.value);
    console.log('选择的名称:', selectedOption.name, ', 选择的值:', selectedOption.value);
  }
}