vue不使用select实现下拉框选择

可以使用 `v-for` 指令来实现下拉框选择，代码示例如下：

<div>
  <div v-on:click="showOptions = !showOptions">
    {{ selectedOption }}
  </div>
  <div v-if="showOptions" v-on:click="showOptions = false">
    <div v-for="option in options" v-on:click="selectOption(option)">
      {{ option }}
    </div>
  </div>
</div>

在 Vue 的数据模型中，我们需要定义两个变量：`selectedOption` 和 `options`。其中，`selectedOption` 表示当前选中的选项，`options` 表示下拉框中的所有选项。然后，我们需要定义一个 `showOptions` 变量来控制下拉框的显示和隐藏。

在模板中，我们首先渲染出当前选中的选项，然后通过 `v-if` 指令来判断是否需要渲染下拉框。如果需要渲染，我们使用 `v-for` 指令来遍历所有选项，并通过 `v-on:click` 指令来绑定选项点击事件。点击选项时，我们调用 `selectOption` 方法来更新当前选中的选项，并将下拉框隐藏。

最后，我们需要在 Vue 实例中定义 `selectOption` 方法来更新 `selectedOption` 变量的值。代码示例如下：

new Vue({
  el: '#app',
  data: {
    selectedOption: '请选择',
    options: ['选项1', '选项2', '选项3'],
    showOptions: false,
  },
  methods: {
    selectOption(option) {
      this.selectedOption = option;
    },
  },
});

这样，就可以通过 `v-for` 指令来实现下拉框的选择了。