当前位置：首页 > VUE

vue 实现下拉选项

2026-01-21 00:31:30VUE

实现基础下拉选项

使用 Vue 的 <select> 和 v-model 实现数据绑定。

<template>
  <select v-model="selectedOption">
    <option v-for="option in options" :value="option.value">
      {{ option.label }}
    </option>
  </select>
</template>

<script>
export default {
  data() {
    return {
      selectedOption: '',
      options: [
        { value: 'option1', label: '选项1' },
        { value: 'option2', label: '选项2' }
      ]
    };
  }
};
</script>

v-model 绑定 selectedOption，选项通过 v-for 动态渲染。

使用第三方组件库

若需更丰富的功能（如搜索、多选），可使用 Element UI 或 Ant Design Vue。
以 Element UI 为例：

<template>
  <el-select v-model="selectedOption" placeholder="请选择">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
</template>

<script>
import { ElSelect, ElOption } from 'element-ui';
export default {
  components: { ElSelect, ElOption },
  data() {
    return {
      selectedOption: '',
      options: [
        { value: '1', label: '选项A' },
        { value: '2', label: '选项B' }
      ]
    };
  }
};
</script>

需先安装 element-ui，并注册组件。

动态加载选项数据

通过异步请求获取选项数据：

<template>
  <select v-model="selectedOption">
    <option v-for="item in dynamicOptions" :value="item.id">
      {{ item.name }}
    </option>
  </select>
</template>

<script>
export default {
  data() {
    return {
      selectedOption: null,
      dynamicOptions: []
    };
  },
  async created() {
    const response = await fetch('https://api.example.com/options');
    this.dynamicOptions = await response.json();
  }
};
</script>

在 created 钩子中发起请求，数据返回后更新 dynamicOptions。

自定义样式与事件

通过 CSS 和事件监听增强交互：

<template>
  <select 
    v-model="selectedOption"
    @change="handleChange"
    class="custom-select">
    <option disabled value="">请选择</option>
    <option v-for="opt in options" :value="opt">{{ opt }}</option>
  </select>
</template>

<script>
export default {
  data() {
    return {
      selectedOption: '',
      options: ['红色', '蓝色', '绿色']
    };
  },
  methods: {
    handleChange() {
      console.log('选中值:', this.selectedOption);
    }
  }
};
</script>

<style>
.custom-select {
  padding: 8px;
  border-radius: 4px;
  border: 1px solid #dcdfe6;
}
</style>

@change 监听选项变化，通过 CSS 自定义下拉框样式。

多选下拉框

使用 multiple 属性实现多选：

vue 实现下拉选项

<template>
  <select v-model="selectedOptions" multiple>
    <option v-for="option in options" :value="option">
      {{ option }}
    </option>
  </select>
</template>

<script>
export default {
  data() {
    return {
      selectedOptions: [],
      options: ['苹果', '香蕉', '橙子']
    };
  }
};
</script>

v-model 绑定数组类型数据，按住 Ctrl 键多选。