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

 更新时间:2025年01月30日 07:07:48   作者:孙 悟 空  
文章介绍了两种使用Vue.js和ElementUI获取select选择框值的方法:一种是使用watch监听selectedValue的变化,另一种是使用@change事件,两种方法都能实现获取选择的value和label

1 使用watch监听selectedValue的变化

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

具体代码如下:

<template>
  <el-select v-model="selectedValue" placeholder="请选择">
    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
    </el-option>
  </el-select>
  <div>
    <div>选择的值:{{ selectedValue }}</div>
    <div>对应的标签:{{ selectedLabel }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      options: [
        { value: 'option1', label: '选项1' },
        { value: 'option2', label: '选项2' },
        { value: 'option3', label: '选项3' }
      ],
      selectedValue: '',
      selectedLabel: ''
    };
  },
  watch: {
    selectedValue(newVal) {
      const option = this.options.find(item => item.value === newVal);
      this.selectedLabel = option ? option.label : '';
    }
  }
};
</script>

结果展示:

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

同时,给<el-option>添加了v-for循环生成所有的选项。

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

最后,将selectedValueselectedLabel显示在页面上。

2 @change事件获取

2.1 只返回选择的value

<template>
  <div>
    <el-select v-model="selectedValue" @change="getSelectValue">
      <el-option
        v-for="option in options"
        :key="option.value"
        :label="option.label"
        :value="option.value"
      >
      </el-option>
    </el-select>
  </div>
</template>
<script>
export default {
  data() {
    return {
      options: [
       	{ value: 'option1', label: '选项1' },
        { value: 'option2', label: '选项2' },
        { value: 'option3', label: '选项3' }
      ],
      selectedValue: '',
    };
  },
  methods: {
    getSelectValue(data) {
     console.log('value', data);
    },
  },
};
</script>

结果展示:

2.2 返回选择的value和label

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

<template>
  <div>
    <el-select v-model="selectedOption" @change="handleOptionChange">
      <el-option
        v-for="option in options"
        :key="option.value"
        :label="option.label"
        :value="option.value"
      >
      </el-option>
    </el-select>
    <p>Selected Option: {{ selectedOption }}</p>
    <p>Selected Option Label: {{ selectedOptionLabel }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      options: [
       	{ value: 'option1', label: '选项1' },
        { value: 'option2', label: '选项2' },
        { value: 'option3', label: '选项3' }
      ],
      selectedOption: '',
      selectedOptionLabel: '',
    };
  },
  methods: {
    handleOptionChange() {
      this.selectedOptionLabel = this.options.find(
        (option) => option.value === this.selectedOption
      ).label;
    },
  },
};
</script>

结果展示:

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

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

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

最后,我们在模板中将selectedOptionselectedOptionLabel变量的值显示出来。

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • vue如何实现未登录不能访问某些页面

    vue如何实现未登录不能访问某些页面

    这篇文章主要介绍了vue如何实现未登录不能访问某些页面问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • vue中标签自定义属性的使用及说明

    vue中标签自定义属性的使用及说明

    这篇文章主要介绍了vue中标签自定义属性的使用及说明,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-05-05
  • vue中计算属性computed和普通属性method的区别小结

    vue中计算属性computed和普通属性method的区别小结

    Vue.js中Computed和Methods是两种常用的数据处理方式,本文主要介绍了vue中计算属性computed和普通属性method的区别小结,具有一定的参考价值,感兴趣的可以了解一下
    2024-06-06
  • Vue中$router与 $route的区别详解

    Vue中$router与 $route的区别详解

    这篇文章主要介绍了Vue中$router与 $route的区别详解,文章围绕主题展开详细的内容戒杀,具有一定的参考价值,需要的朋友可以参考一下
    2022-09-09
  • vue中keep-alive组件的用法示例

    vue中keep-alive组件的用法示例

    众所周知keep-alive是Vue提供的一个抽象组件,主要是用来对组件进行缓存,从而做到节省性能,这篇文章主要给大家介绍了关于vue中keep-alive组件用法的相关资料,需要的朋友可以参考下
    2021-05-05
  • Vue项目实现换肤功能的一种方案分析

    Vue项目实现换肤功能的一种方案分析

    这篇文章主要介绍了Vue项目实现换肤功能的一种方案分析,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-08-08
  • Vue移动端下拉加载更多数据onload实现方法浅析

    Vue移动端下拉加载更多数据onload实现方法浅析

    这篇文章主要介绍了Vue移动端下拉加载更多数据onload实现方法,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-02-02
  • Vue路由传参详细介绍

    Vue路由传参详细介绍

    这篇文章主要介绍了Vue路由传参的两种方式query和params,介绍了query和params区别与总结,结合示例代码给大家介绍的非常详细,需要的朋友可以参考下
    2022-09-09
  • vue实现计算器功能

    vue实现计算器功能

    这篇文章主要为大家详细介绍了vue实现计算器功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-02-02
  • vue在自定义组件中使用v-model进行数据绑定的方法

    vue在自定义组件中使用v-model进行数据绑定的方法

    这篇文章主要介绍了vue在自定义组件中使用v-model进行数据绑定的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-03-03

最新评论