vue input 下拉菜单

你可以使用Vue的v-model指令和select元素来创建一个下拉菜单。下面是一个示例：

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

<script>
export default {
  data() {
    return {
      selectedFruit: '', // 用于存储选择的水果的id
      fruits: [
        { id: 1, name: '苹果' },
        { id: 2, name: '香蕉' },
        { id: 3, name: '橙子' },
        // 其他水果
      ]
    };
  },
  computed: {
    selectedFruitName() {
      // 根据选择的水果id获取水果名称
      const fruit = this.fruits.find(f => f.id === this.selectedFruit);
      return fruit ? fruit.name : '';
    }
  }
};
</script>

在上面的示例中，我们使用了v-model指令将`selectedFruit`与下拉菜单的值进行双向绑定。通过遍历`fruits`数组，我们使用`v-for`指令创建了每个水果的选项。当用户选择一个选项时，`selectedFruit`的值会更新，并且通过计算属性`selectedFruitName`可以获取到选择的水果的名称。

你可以根据自己的需求修改上述示例代码，添加更多选项或调整样式。希望能帮到你！