vue select获取value 和label

### 回答1：
Vue中的select组件可以通过v-model绑定数据，获取选中的value和label。

例如：

<template>
  <div>
    <select v-model="selected">
      <option v-for="option in options" :value="option.value">{{ option.label }}</option>
    </select>
    <p>选中的value：{{ selected }}</p>
    <p>选中的label：{{ options.find(option => option.value === selected).label }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selected: '',
      options: [
        { value: '1', label: '选项1' },
        { value: '2', label: '选项2' },
        { value: '3', label: '选项3' },
      ],
    };
  },
};
</script>

在上面的例子中，我们通过v-model绑定了一个名为selected的变量，当用户选择一个选项时，selected的值会自动更新为该选项的value。我们可以通过{{ selected }}来获取选中的value。

同时，我们也可以通过options数组中的label属性来获取选中的label。在上面的例子中，我们使用了数组的find方法来查找选中的选项，并返回它的label属性。

### 回答2：
Vue中的select组件提供了获取value和label的两种方式。

第一种方式是通过v-model指令绑定select的value属性，从而获取选中的value值。例如：

<template>
  <div>
    <select v-model="selectedValue">
      <option v-for="option in options" :value="option.value">{{ option.label }}</option>
    </select>
    <p>选中的值：{{ selectedValue }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      options: [
        { label: '选项1', value: '1' },
        { label: '选项2', value: '2' },
        { label: '选项3', value: '3' }
      ],
      selectedValue: ''
    }
  }
}
</script>

上面的代码中，通过v-model指令将select的value属性绑定到了selectedValue属性上，从而获取选中的value值。

第二种方式是通过在option标签中使用v-bind指令动态绑定value和label属性，从而获取value和label值。例如：

<template>
  <div>
    <select @change="getOptionLabel($event.target.value)">
      <option v-for="option in options" :key="option.value" v-bind:value="option.value">{{ option.label }}</option>
    </select>
    <p>选中的值：{{ selectedValue }}</p>
    <p>选中的标签：{{ selectedLabel }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      options: [
        { label: '选项1', value: '1' },
        { label: '选项2', value: '2' },
        { label: '选项3', value: '3' }
      ],
      selectedValue: '',
      selectedLabel: ''
    }
  },
  methods: {
    getOptionLabel(val) {
      this.selectedValue = val
      this.selectedLabel = this.options.find(option => option.value === val).label
    }
  }
}
</script>

上面的代码中，在option标签中使用了v-bind指令将option的value和label属性绑定到了options数组中相应对象的value和label属性上。通过@change事件监听select选中项的变化，从而获取选中的value和label值。getOptionLabel方法获取选中的value值，并通过数组的find方法找到value值相应的对象，从而获取到选项的label值。

总之，可以通过v-model指令或者v-bind指令动态绑定option的value和label属性，从而获取Vue中select组件的value和label值。

### 回答3：
Vue Select 是一个用于创建漂亮且易于使用的下拉菜单的 Vue 组件。该组件可以让开发者创建 多选下拉框、单选下拉框、标签输入框 等输入形式，而其获取其选中的 value 和 label 也非常方便。

一、使用 v-model 直接获取 value：

Vue Select 组件支持 v-model 模型来操作选项。也就是说在 Vue 实例中，绑定 v-model 的变量值将是选项的 value 值。例如：

<template>
  <v-select v-model="selectedValue" :options="optionList"></v-select>
</template>

<script>
  export default {
    data() {
      return {
        selectedValue: ''
        optionList: [
          { value: '1', label: '选项1' },
          { value: '2', label: '选项2' },
          { value: '3', label: '选项3' }
        ]
      }
    }
  }
</script>

上述代码中的 selectedValue 变量将会对应选中选项的 value 值，可以通过 this.selectedValue 获取到其当前值，也可以通过 v-model 修改其值。

二、使用 labelInValue 获取 label：

Vue Select 支持一个属性 labelInValue，该属性可以让选中的选项返回一个含有 label 和 value 两个属性的对象。例如：

<template>
  <v-select v-model="selectedOption" :options="optionList" labelInValue></v-select>
</template>

<script>
  export default {
    data() {
      return {
        selectedOption: { label: '', value: '' }, // 注意要初始化
        optionList: [
          { value: '1', label: '选项1' },
          { value: '2', label: '选项2' },
          { value: '3', label: '选项3' }
        ]
      }
    }
  }
</script>

上述代码中的 selectedOption 对象将会对应选中的选项，其中 selectedOption.label 将会是选中选项的 label 值，selectedOption.value 将会是选中选项的 value 值。

综上，Vue Select 获取选中 value 和 label 值相对简单，通过 v-model 和 labelInValue 两种方式分别获取。在实际开发中，需要根据需求灵活使用。