Vue Element如何獲取select選擇框選擇的value和label

更新時間：2025年01月30日 07:07:48 作者：孫悟空

文章介紹了兩種使用Vue.js和ElementUI獲取select選擇框值的方法：一種是使用watch監(jiān)聽selectedValue的變化,另一種是使用@change事件,兩種方法都能實現(xiàn)獲取選擇的value和label

1 使用watch監(jiān)聽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循環(huán)生成所有的選項。

當選中的值改變時，使用watch監(jiān)聽selectedValue的變化，通過find方法從options中找到選中的值對應的選項，并將標簽存儲在selectedLabel變量中。

最后，將selectedValue和selectedLabel顯示在頁面上。

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事件監(jiān)聽器，當用戶在選擇框中選擇一個選項時，該事件監(jiān)聽器會被觸發(fā)。

handleOptionChange方法是@change事件監(jiān)聽器的處理函數，它通過使用find方法查找用戶選擇的選項的標簽，并將其存儲在selectedOptionLabel變量中。

最后，我們在模板中將selectedOption和selectedOptionLabel變量的值顯示出來。

總結

以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

vue如何實現(xiàn)未登錄不能訪問某些頁面
這篇文章主要介紹了vue如何實現(xiàn)未登錄不能訪問某些頁面問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2024-03-03
vue中標簽自定義屬性的使用及說明
這篇文章主要介紹了vue中標簽自定義屬性的使用及說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-05-05
vue中計算屬性computed和普通屬性method的區(qū)別小結
Vue.js中Computed和Methods是兩種常用的數據處理方式,本文主要介紹了vue中計算屬性computed和普通屬性method的區(qū)別小結,具有一定的參考價值,感興趣的可以了解一下
2024-06-06
Vue中$router與?$route的區(qū)別詳解
這篇文章主要介紹了Vue中$router與?$route的區(qū)別詳解，文章圍繞主題展開詳細的內容戒殺，具有一定的參考價值，需要的朋友可以參考一下
2022-09-09
vue中keep-alive組件的用法示例
眾所周知keep-alive是Vue提供的一個抽象組件，主要是用來對組件進行緩存，從而做到節(jié)省性能，這篇文章主要給大家介紹了關于vue中keep-alive組件用法的相關資料,需要的朋友可以參考下
2021-05-05
Vue項目實現(xiàn)換膚功能的一種方案分析
這篇文章主要介紹了Vue項目實現(xiàn)換膚功能的一種方案分析，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下
2019-08-08
Vue移動端下拉加載更多數據onload實現(xiàn)方法淺析
這篇文章主要介紹了Vue移動端下拉加載更多數據onload實現(xiàn)方法，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-02-02
Vue路由傳參詳細介紹
這篇文章主要介紹了Vue路由傳參的兩種方式query和params,介紹了query和params區(qū)別與總結，結合示例代碼給大家介紹的非常詳細，需要的朋友可以參考下
2022-09-09
vue實現(xiàn)計算器功能
這篇文章主要為大家詳細介紹了vue實現(xiàn)計算器功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-02-02
vue在自定義組件中使用v-model進行數據綁定的方法
這篇文章主要介紹了vue在自定義組件中使用v-model進行數據綁定的方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2019-03-03