### 回答1：
Vue中的
select组件可以通过v-mod
el绑定数据，获取选
中的
value和
label。
例如：
```html
<template>
<div>
<
select v-mod
el="
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-mod
el绑定了一个名为
selected的变量，当用户选择一个选项时，
selected的值会自动更新为该选项的
value。我们可以通过{{
selected }}来获取选
中的
value。
同时，我们也可以通过options数组
中的
label属性来获取选
中的
label。在上面的例子
中，我们使用了数组的find方法来查找选
中的选项，并返回它的
label属性。
### 回答2：
Vue中的
select组件提供了获取
value和
label的两种方式。
第一种方式是通过v-mod
el指令绑定
select的
value属性，从而获取选
中的
value值。例如：
```html
<template>
<div>
<
select v-mod
el="
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-mod
el指令将
select的
value属性绑定到了
selected
Value属性上，从而获取选
中的
value值。
第二种方式是通过在option标签
中使用v-bind指令动态绑定
value和
label属性，从而获取
value和
label值。例如：
```html
<template>
<div>
<
select @change="getOption
Label($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>选
中的标签：{{
selected
Label }}</p>
</div>
</template>
<script>
export default {
data() {
return {
options: [
{
label: '选项1',
value: '1' },
{
label: '选项2',
value: '2' },
{
label: '选项3',
value: '3' }
],
selected
Value: '',
selected
Label: ''
}
},
methods: {
getOption
Label(val) {
this.
selected
Value = val
this.
selected
Label = this.options.find(option => option.
value === val).
label
}
}
}
</script>
```
上面的代码
中，在option标签
中使用了v-bind指令将option的
value和
label属性绑定到了options数组
中相应对象的
value和
label属性上。通过@change事件监听
select选
中项的变化，从而获取选
中的
value和
label值。getOption
Label方法获取选
中的
value值，并通过数组的find方法找到
value值相应的对象，从而获取到选项的
label值。
总之，可以通过v-mod
el指令或者v-bind指令动态绑定option的
value和
label属性，从而获取
Vue中select组件的
value和
label值。
### 回答3：
Vue Select 是一个用于创建漂亮且易于使用的
下拉菜单的
Vue 组件。该
组件可以让开发者创建 多选
下拉框、单选
下拉框、标签输入框 等输入形式，而其获取其选
中的
value 和
label 也非常方便。
一、使用 v-mod
el 直接获取
value：
Vue Select 组件支持 v-mod
el 模型来操作选项。也就是说在
Vue 实例
中，绑定 v-mod
el 的变量值将是选项的
value 值。例如：
```
<template>
<v-
select v-mod
el="
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-mod
el 修改其值。
二、使用
labelIn
Value 获取
label：
Vue Select 支持一个属性
labelIn
Value，该属性可以让选
中的选项返回一个含有
label 和
value 两个属性的对象。例如：
```
<template>
<v-
select v-mod
el="
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-mod
el 和
labelIn
Value 两种方式分别获取。在实际开发
中，需要根据需求灵活使用。
1151
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
