vue2中用原生input实现下拉选择

在Vue2中，可以使用原生`<input>`元素和一些JavaScript代码来实现下拉选择。

首先，在模板中，创建一个输入框和一个下拉列表：

<input type="text" v-model="selectedValue" @focus="showList">
<ul v-show="showDropdown">
  <li v-for="item in dropdownList" @click="selectItem(item)">{{ item }}</li>
</ul>

接下来，在Vue实例中，定义选项列表和一些逻辑：

data: {
  selectedValue: '',
  showDropdown: false,
  dropdownList: ['Option 1', 'Option 2', 'Option 3']
},
methods: {
  showList() {
    this.showDropdown = true;
  },
  selectItem(item) {
    this.selectedValue = item;
    this.showDropdown = false;
  }
}

这段代码使用`v-model`指令将输入框的值绑定到Vue实例的`selectedValue`属性上。当输入框获得焦点时，调用`showList`方法显示下拉列表。下拉列表使用`v-show`指令来控制显示和隐藏。当用户选择一个选项时，调用`selectItem`方法将选项的值赋给`selectedValue`属性，并隐藏下拉列表。

需要注意的是，这只是一个简单的示例，实际应用中可能需要添加更多的逻辑和样式来使下拉选择器更加实用和美观。