vue 下拉框

<template>
  <div>
    <!-- 下拉框组件 -->
    <select v-model="selected">
      <option disabled value="">请选择</option>
      <option v-for="item in options" :key="item.value" :value="item.value">
        {{ item.text }}
      </option>
    </select>
    <!-- 显示选中的值 -->
    <p>选中的值: {{ selected }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 当前选中的值
      selected: '',
      // 下拉选项列表
      options: [
        { text: '选项1', value: 'option1' },
        { text: '选项2', value: 'option2' },
        { text: '选项3', value: 'option3' }
      ]
    };
  }
};
</script>

<style scoped>
/* 简单的样式 */
select {
  margin-bottom: 10px;
}
</style>

解释说明：

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

   • 使用了 <select> 标签来创建下拉框，并通过 v-model 绑定到 data 中的 selected 属性，这样可以双向绑定选中的值。
   • 使用 v-for 指令遍历 options 数组，生成每个选项。v-for 的参数 item 是当前项的对象，item.value 和 item.text 分别是选项的值和显示文本。
   • <option disabled value="">请选择</option> 是一个禁用的默认选项，提示用户选择。

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

   • 在 data 函数中定义了两个属性：
     • selected: 存储当前选中的值，默认为空字符串。
     • options: 一个包含多个选项的对象数组，每个对象有两个属性：text（显示文本）和 value（实际值）。

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

   • 给下拉框添加了一些简单的样式，设置了底部间距。

这个示例展示了如何在 Vue.js 中创建并使用一个简单的下拉框，并且能够动态绑定和显示选中的值。