vue select

<template>
  <div>
    <label for="select">Choose an option:</label>
    <select v-model="selected" id="select">
      <option disabled value="">Please select one</option>
      <option v-for="option in options" :key="option.value" :value="option.value">
        {{ option.text }}
      </option>
    </select>
    <p>Selected: {{ selected }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selected: '',
      options: [
        { text: 'One', value: 'one' },
        { text: 'Two', value: 'two' },
        { text: 'Three', value: 'three' }
      ]
    };
  }
};
</script>

<style scoped>
/* Add some basic styling */
select {
  margin-bottom: 10px;
  padding: 5px;
}
</style>

解释说明：

1. 模板部分 (<template>):

   • 使用了 <select> 标签创建一个下拉选择框，并通过 v-model 指令将其绑定到 selected 数据属性。
   • 使用 v-for 指令遍历 options 数组，生成多个 <option> 元素。每个选项都有一个唯一的 value 和显示的 text。

2. 脚本部分 (<script>):

   • 定义了一个 Vue 组件，包含 data 函数返回的对象。
   • selected 是当前选中的值，默认为空字符串。
   • options 是一个数组，包含多个对象，每个对象表示一个可选项，有 text 和 value 属性。

3. 样式部分 (<style scoped>):

   • 添加了一些简单的样式，使选择框更美观。

这个示例展示了如何在 Vue 中使用 <select> 元素，并通过双向数据绑定实现选择项的动态更新。