vue下拉框代码

下面是一个基本的 Vue 下拉框代码示例：

<template>
  <div>
    <label for="fruit">请选择水果：</label>
    <select id="fruit" v-model="selectedFruit">
      <option disabled value="">请选择</option>
      <option v-for="fruit in fruits" :key="fruit.id" :value="fruit.name">{{ fruit.name }}</option>
    </select>
    <p>你选择的水果是：{{ selectedFruit }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedFruit: '',
      fruits: [
        { id: 1, name: '苹果' },
        { id: 2, name: '香蕉' },
        { id: 3, name: '橘子' },
        { id: 4, name: '草莓' }
      ]
    };
  }
};
</script>

在上面的代码中，我们使用了 Vue 的指令 `v-model` 来绑定下拉框的值，使用 `v-for` 指令来循环生成下拉框的选项，使用 `:key` 绑定每个选项的唯一值，使用 `:value` 绑定每个选项的值。最终选择的值会被保存在 `selectedFruit` 数据中，我们可以在模板中显示出来。