vue.js下拉框选中事件

<template>
  <div>
    <select @change="handleChange">
      <option disabled value="">请选择一个选项</option>
      <option v-for="option in options" :key="option.value" :value="option.value">
        {{ option.text }}
      </option>
    </select>
    <p>选中的值是：{{ selectedValue }}</p>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const options = [
      { text: '选项 1', value: 'a' },
      { text: '选项 2', value: 'b' },
      { text: '选项 3', value: 'c' }
    ];
    const selectedValue = ref('');

    function handleChange(event) {
      selectedValue.value = event.target.value;
      console.log('选中的值是：', selectedValue.value);
      // 这里可以添加更多的逻辑，比如发送请求等
    }

    return {
      options,
      selectedValue,
      handleChange
    };
  }
};
</script>