vue3如何获取下拉框中选中值的label和key

在Vue3中，可以使用`v-model`指令来绑定下拉框的选中值，然后使用`ref`获取下拉框的DOM节点，再使用`selectedOptions`属性获取选中的选项。具体的实现步骤如下：

1. 在`<select>`标签中使用`v-model`指令绑定选中值：

<select v-model="selectedOption">
  <option v-for="(option, index) in options" :key="index" :value="option.value">
    {{ option.label }}
  </option>
</select>

2. 在Vue实例中定义`selectedOption`变量和`options`数组：

import { ref } from 'vue';

export default {
  setup() {
    const selectedOption = ref('');
    const options = [
      { label: '选项1', value: 'option1' },
      { label: '选项2', value: 'option2' },
      { label: '选项3', value: 'option3' },
    ];

    return {
      selectedOption,
      options,
    };
  }
}

3. 使用`ref`获取下拉框的DOM节点，并使用`selectedOptions`属性获取选中的选项：

<select ref="select" v-model="selectedOption">
  <option v-for="(option, index) in options" :key="index" :value="option.value">
    {{ option.label }}
  </option>
</select>

import { ref } from 'vue';

export default {
  setup() {
    const selectedOption = ref('');
    const options = [
      { label: '选项1', value: 'option1' },
      { label: '选项2', value: 'option2' },
      { label: '选项3', value: 'option3' },
    ];
    const select = ref(null);

    function getSelectedLabel() {
      const selectedLabel = select.value.selectedOptions[0].label;
      console.log(`选中的选项为：${selectedLabel}`);
    }

    return {
      selectedOption,
      options,
      select,
      getSelectedLabel,
    };
  }
}

以上代码中的`getSelectedLabel`函数可以获取选中的选项的label值。在函数中，先使用`select.value`获取下拉框的DOM节点，再使用`selectedOptions`属性获取选中的选项，最后使用`label`属性获取选项的label值。