首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

VueJS: Elements-UI el-select:如何获取selectedLabel值?

在VueJS的Elements-UI库中,el-select组件用于创建下拉选择框。要获取el-select中当前选中的选项的label值,可以通过v-model指令绑定一个变量,并在方法或计算属性中使用该变量来获取selectedLabel值。

首先,在Vue实例的data属性中定义一个变量来存储选中的选项的label值,例如:

代码语言:txt
复制
data() {
  return {
    selectedLabel: ''
  }
}

然后,在el-select组件中使用v-model指令将selectedLabel变量与选中的选项进行双向绑定,如下所示:

代码语言:txt
复制
<el-select v-model="selectedLabel">
  <el-option label="Option 1" value="option1"></el-option>
  <el-option label="Option 2" value="option2"></el-option>
  <el-option label="Option 3" value="option3"></el-option>
</el-select>

此时,selectedLabel变量会根据用户选择的选项自动更新。

如果需要获取selectedLabel的值,可以在方法或计算属性中直接使用该变量,例如:

代码语言:txt
复制
methods: {
  getSelectedLabel() {
    console.log(this.selectedLabel);
  }
}

在以上示例中,当用户选择不同的选项时,通过调用getSelectedLabel方法,可以在控制台输出当前选中的选项的label值。

Elements-UI是由饿了么前端团队推出的一套基于Vue.js的UI组件库,具有易用、美观、灵活等特点。el-select是其中的一个下拉选择框组件,可用于创建各种类型的下拉菜单。你可以通过以下链接查看Elements-UI官方文档中el-select的详细介绍和使用方法:

Elements-UI el-select 官方文档

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

没有搜到相关的视频

领券