vue3下拉框显示内容

在Vue3中，我们可以使用`v-model`和`<select>`元素创建一个动态下拉框，展示预设的内容。首先，你需要在HTML模板中设置基本结构：

<template>
  <div>
    <select v-model="selectedOption" @change="optionChanged">
      <option v-for="(item, index) in options" :key="index" :value="item.value">{{ item.label }}</option>
    </select>
  </div>
</template>

在这个例子中：

- `v-model="selectedOption"`绑定当前选中的选项值到`selectedOption`数据属性。
- `options`是一个包含下拉框选项的对象数组，每个对象都有`value`和`label`两个字段，分别代表值和标签文本。
- `:value="item.value"`将`value`字段的值作为选项的`value`属性，`{{ item.label }}`则是选项的显示文本。
- `@change="optionChanged"`监听下拉框选择变化事件，当用户改变选择时会触发`optionChanged`方法。

然后，在你的Vue组件的script部分添加对应的data和methods:

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

const options = [
  { value: 'option1', label: '选项一' },
  { value: 'option2', label: '选项二' },
  // ... 更多选项
];

const selectedOption = ref('');

function optionChanged(e) {
  selectedOption.value = e.target.value;
}
</script>

现在，当你在页面上看到下拉框时，它会根据`options`数组的内容动态地显示，并通过`selectedOption`反映出用户的当前选择。当用户更改选择时，`optionChanged`函数会被调用并更新`selectedOption`。