vue下拉框获取选中值的所有信息

你可以使用v-model指令将下拉框与选中值绑定，然后通过事件监听获取选中值的相关信息。例如：

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

<script>
export default {
  data() {
    return {
      selectedOption: '',
      options: [
        { value: 'option1', label: '选项1' },
        { value: 'option2', label: '选项2' },
        { value: 'option3', label: '选项3' },
      ],
    };
  },
  methods: {
    getSelectedOptionInfo() {
      const selectedOptionValue = this.selectedOption;
      const selectedOptionLabel = this.options.find((option) => option.value === selectedOptionValue).label;
      console.log(`选中的值为：${selectedOptionValue}，选中的选项为：${selectedOptionLabel}`);
    },
  },
};
</script>

在上面的代码中，我们先将下拉框与选中值绑定到`selectedOption`属性上，然后在`<select>`标签上监听`change`事件，调用`getSelectedOptionInfo()`方法获取选中值的相关信息。在`getSelectedOptionInfo()`方法中，我们首先获取选中的值，然后通过`Array.prototype.find()`方法在选项数组中查找选中值对应的选项，从而获取选中选项的`label`属性。最后将选中值和选项的`label`打印出来。