vue.js 如何获得下拉框选中的值

admin 2026年02月06日 23:26 102 0

在Vue.js中，获取下拉框选中值主要通过v-model指令实现双向绑定，单选时，直接用v-model绑定一个变量，该变量会自动存储当前选中项的值，如`，选中后selectedValue即为选项的value或文本，多选时，需绑定数组并添加multiple属性，如，选中值会存入数组，也可通过@change事件监听变化，在事件处理函数中通过event.target.value获取选中值，v-model`是Vue推荐的核心方式，简洁高效，适用于大多数场景。

Vue.js 中获取下拉框选中值的完整指南

在 Web 开发中，下拉框（<select>）是表单交互的核心组件之一，用于让用户从预设选项中选择值，在 Vue.js 框架中，获取下拉框的选中值是基础且高频的操作，本文将从基础到进阶，详细介绍不同场景下获取下拉框选中值的方法，包括单选、多选、动态选项等常见需求,并附上清晰的代码示例和问题解决方案。

基础用法：单选下拉框与 `v-model`

对于单选下拉框（即用户只能选择一个选项），Vue.js 推荐使用 v-model 指令实现双向绑定。v-model 会自动监听下拉框的选中变化，并将选中值同步到绑定的数据属性中,无需手动监听事件。

示例：简单单选下拉框

<template>
  <div>
    <!-- 下拉框选项为字符串 -->
    <select v-model="selectedFruit">
      <option value="apple">苹果</option>
      <option value="banana">香蕉</option>
      <option value="orange">橙子</option>
    </select>
    <p>选中的水果：{{ selectedFruit }}</p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      selectedFruit: 'apple' // 默认选中苹果
    }
  }
}
</script>

说明：

v-model="selectedFruit" 将 <select> 的选中值与 data 中的 selectedFruit 绑定，当用户选择不同选项时，selectedFruit 会自动更新为当前选项的 value 值（如 "apple"、"banana"）。
如果需要默认选中某个选项，只需在 data 中将 selectedFruit 初始化为对应 value 即可（如示例中的 'apple'）。
当选项值与显示文本不同时，v-model 绑定的是 value 属性的值,而不是显示的文本内容。

示例：选中值为对象

如果下拉框的选项是对象（如 { id: 1, name: '苹果' }），且需要获取整个选中对象（而不仅仅是对象的某个属性），可以通过 v-model 直接绑定对象，并将 option 的 value 绑定到对象本身（使用 v-bind:value 动态绑定）。

<template>
  <div>
    <select v-model="selectedFruitObj">
      <option 
        v-for="fruit in fruits" 
        :key="fruit.id" 
        :value="fruit"
      >
        {{ fruit.name }}
      </option>
    </select>
    <p>选中的水果对象：{{ selectedFruitObj }}</p>
    <p>水果ID：{{ selectedFruitObj.id }}</p>
    <p>水果名称：{{ selectedFruitObj.name }}</p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      fruits: [
        { id: 1, name: '苹果' },
        { id: 2, name: '香蕉' },
        { id: 3, name: '橙子' }
      ],
      selectedFruitObj: { id: 1, name: '苹果' } // 默认选中第一个对象
    }
  }
}
</script>

说明：

value="fruit" 将每个 <option> 的 value 绑定为整个 fruit 对象,而非对象的某个属性。
v-model="selectedFruitObj" 会直接获取选中的对象，后续可通过 selectedFruitObj.id、selectedFruitObj.name 访问对象属性。
这种方式在需要获取完整选项信息时特别有用,例如在表单提交或数据关联场景中。

进阶用法：多选下拉框

多选下拉框允许用户选择多个选项（需配合 multiple 属性），v-model 绑定的值会变成一个数组，数组元素为所有选中选项的 value 值。

示例：基础多选下拉框

<template>
  <div>
    <!-- 添加 multiple 属性支持多选 -->
    <select v-model="selectedFruits" multiple>
      <option value="apple">苹果</option>
      <option value="banana">香蕉</option>
      <option value="orange">橙子</option>
    </select>
    <p>选中的水果数组：{{ selectedFruits }}</p>
    <p>选中的水果数量：{{ selectedFruits.length }}</p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      selectedFruits: ['apple'] // 默认选中苹果
    }
  }
}
</script>

说明：

multiple 属性使下拉框支持多选（按住 Ctrl/Cmd 可多选，或点击拖动连续选择）。
v-model="selectedFruits" 绑定的 selectedFruits 是一个数组，存储所有选中选项的 value 值（如 ['apple', 'banana']）。
默认选中多个选项时，只需在 data 中将 selectedFruits 初始化为包含多个 value 的数组。

示例：多选下拉框优化体验

在实际应用中，多选下拉框通常需要更好的用户体验，例如显示已选标签、提供全选/取消全选功能等。

<template>
  <div>
    <div class="multi-select-container">
      <select 
        v-model="selectedFruits" 
        multiple 
        @change="handleSelectionChange"
        size="5"
      >
        <option value="apple">苹果</option>
        <option value="banana">香蕉</option>
        <option value="orange">橙子</option>
        <option value="grape">葡萄</option>
        <option value="watermelon">西瓜</option>
      </select>
      <div class="selected-tags">
        <span 
          v-for="fruit in selectedFruits" 
          :key="fruit"
          class="tag"
        >
          {{ fruit }}
          <button @click="removeFruit(fruit)">×</button>
        </span>
      </div>
      <div class="actions">
        <button @click="selectAll">全选</button>
        <button @click="clearSelection">清空</button>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      selectedFruits: [],
      allFruits: ['apple', 'banana', 'orange', 'grape', 'watermelon']
    }
  },