### 回答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="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-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 两种方式分别
获取。在实际开发
中，需要根据需求灵活使用。
扫一扫
8714
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
