### 回答1：
Vue中的
select组件可以通过v-model绑定数据，
获取选中的
value和label。
例如：
```html
<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值。例如：
```html
<template>
<div>
<
select v-model="
selected
Value">
<option v-for="option in options" :
value="option.
value">{{ option.label }}</option>
</
select>
<p>选中的值：{{
selected
Value }}</p>
</div>
</template>
<script>
export default {
data() {
return {
options: [
{ label: '选项1',
value: '1' },
{ label: '选项2',
value: '2' },
{ label: '选项3',
value: '3' }
],
selected
Value: ''
}
}
}
</script>
```
上面的代码中，通过v-model指令将
select的
value属性绑定到了
selected
Value属性上，从而
获取选中的
value值。
第二种方式是通过在option标签中使用v-bind指令动态绑定
value和label属性，从而
获取value和label值。例如：
```html
<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>选中的值：{{
selected
Value }}</p>
<p>选中的标签：{{
selectedLabel }}</p>
</div>
</template>
<script>
export default {
data() {
return {
options: [
{ label: '选项1',
value: '1' },
{ label: '选项2',
value: '2' },
{ label: '选项3',
value: '3' }
],
selected
Value: '',
selectedLabel: ''
}
},
methods: {
getOptionLabel(val) {
this.
selected
Value = 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="
selected
Value" :options="optionList"></v-
select>
</template>
<script>
export default {
data() {
return {
selected
Value: ''
optionList: [
{
value: '1', label: '选项1' },
{
value: '2', label: '选项2' },
{
value: '3', label: '选项3' }
]
}
}
}
</script>
```
上述代码中的
selected
Value 变量将会对应选中选项的
value 值，可以通过 this.
selected
Value 获取到其当前值，也可以通过 v-model 修改其值。
二、使用 labelIn
Value 获取 label：
Vue Select 支持一个属性 labelIn
Value，该属性可以让选中的选项返回一个含有 label 和
value 两个属性的对象。例如：
```
<template>
<v-
select v-model="
selectedOption" :options="optionList" labelIn
Value></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 和 labelIn
Value 两种方式分别
获取。在实际开发中，需要根据需求灵活使用。
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
