vue 3 select

在 Vue 3 中，可以使用 `v-model` 指令来绑定表单元素的值。对于下拉框（select）组件，可以使用 `v-model` 指令来绑定当前选中的值。

以下是一个基本的 Vue 3 下拉框示例：

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

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

在上面的代码中，我们使用 `v-model` 指令来绑定 `selected` 属性，表示当前选中的值。我们还使用 `v-for` 指令来循环渲染选项列表。每个选项使用 `value` 属性来指定对应的值，`label` 属性来指定显示的文本。

当用户选择某个选项时，`v-model` 指令会自动更新 `selected` 属性的值。我们可以在组件的 `methods` 中定义一个方法来处理选项变化事件，例如：

<template>
  <select v-model="selected" @change="handleSelectChange">
    <option value="">请选择</option>
    <option v-for="option in options" :value="option.value">{{ option.label }}</option>
  </select>
</template>

<script>
export default {
  data() {
    return {
      selected: '',
      options: [
        { label: '选项 1', value: 'option1' },
        { label: '选项 2', value: 'option2' },
        { label: '选项 3', value: 'option3' }
      ]
    };
  },
  methods: {
    handleSelectChange() {
      // 处理下拉框选项变化事件
    }
  }
}
</script>