vue如何获取下拉框中选中值的相关数据

可以使用 `v-model` 指令绑定一个变量来获取下拉框中选中的值，并通过该值来获取相关数据。

例如，我们有一个下拉框，其中的选项是一个 JSON 数组，每个选项都有一个 `id` 和 `name` 属性，我们想要获取选中的选项的 `id` 和 `name`，可以这样做：

<template>
  <div>
    <select v-model="selectedOption">
      <option v-for="option in options" :value="option.id">{{ option.name }}</option>
    </select>
    <p>你选择了选项 {{ selectedOption }}，它的名称是 {{ selectedOptionName }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      options: [
        {id: 1, name: '选项1'},
        {id: 2, name: '选项2'},
        {id: 3, name: '选项3'}
      ],
      selectedOption: null
    }
  },
  computed: {
    selectedOptionName() {
      // 通过 selectedOption 获取选中的选项的名称
      const selectedOption = this.options.find(option => option.id === this.selectedOption)
      return selectedOption ? selectedOption.name : ''
    }
  }
}
</script>

在上面的示例中，我们使用 `v-model` 指令绑定了变量 `selectedOption` 来获取选中的选项的 `id`，然后通过计算属性 `selectedOptionName` 来获取选中的选项的名称。在计算属性中，我们使用 `Array.prototype.find()` 方法根据选中的 `id` 获取对应的选项，最终返回选项的名称。