Vue Element如何获取select选择框选择的value和label

目录

• 1 使用watch监听selectedValue的变化
• 2 @change事件获取
• 2.1 只返回选择的value
• 2.2 返回选择的value和label
• 总结

1 使用watch监听selectedValue的变化

可以使用Element UI中的v-model指令，将选中的值和对应的标签存储在data中的变量中

具体代码如下：

结果展示：

在template中，v-model指令绑定了selectedValue变量，表示选中的值。

同时，给添加了v-for循环生成所有的选项。

当选中的值改变时，使用watch监听selectedValue的变化，通过find方法从options中找到选中的值对应的选项，并将标签存储在selectedLabel变量中。

最后，将selectedValue和selectedLabel显示在页面上。

2 @change事件获取

2.1 只返回选择的value

结果展示：

2.2 返回选择的value和label

下面是一个使用@change获取element选择框的值和名称的Vue示例代码：

结果展示：

在这个示例代码中，我们首先定义了一个el-select元素，并使用v-model指令绑定了一个selectedOption变量，这个变量将用于存储用户选择的选项的值。

接着，我们在el-select元素上添加了一个@change事件监听器，当用户在选择框中选择一个选项时，该事件监听器会被触发。

handleOptionChange方法是@change事件监听器的处理函数，它通过使用find方法查找用户选择的选项的标签，并将其存储在selectedOptionLabel变量中。

最后，我们在模板中将selectedOption和selectedOptionLabel变量的值显示出来。

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持科站长。