vue2手写一个简单的下拉框

在Vue 2中，可以通过使用v-model来创建一个简单的下拉框。以下是一个例子：

<template>
  <div id="app">
    <select v-model="selected">
      <option v-for="option in options" :value="option.value" :key="option.value">
        {{ option.text }}
      </option>
    </select>
    <p>选中的值是: {{ selected }}</p>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      selected: '',
      options: [
        { value: '1', text: '选项1' },
        { value: '2', text: '选项2' },
        { value: '3', text: '选项3' }
      ]
    };
  }
};
</script>

在这个例子中，v-model绑定了名为selected的数据属性，这个属性将保存下拉框当前选中的值。options数组包含了下拉框的选项，每个选项是一个对象，包含value和text属性，分别代表选项的值和显示文本。使用v-for指令来循环渲染这些选项，并通过value属性绑定实际的值。