vue下拉框设置默认值

<template>
  <div>
    <!-- 下拉框组件，绑定 v-model 到 selectedValue -->
    <select v-model="selectedValue">
      <option disabled value="">请选择</option>
      <!-- 遍历 options 数组，生成下拉选项 -->
      <option v-for="option in options" :key="option.value" :value="option.value">
        {{ option.text }}
      </option>
    </select>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 设置默认选中的值
      selectedValue: 'b',
      // 下拉框的选项数组
      options: [
        { text: '选项 A', value: 'a' },
        { text: '选项 B', value: 'b' },
        { text: '选项 C', value: 'c' }
      ]
    };
  }
};
</script>

解释说明：

1. v-model 绑定：通过 v-model="selectedValue" 将下拉框的选择值与 data 中的 selectedValue 变量进行双向绑定。
2. 默认值设置：在 data 中直接将 selectedValue 设置为 'b'，这样页面加载时，默认选中 "选项 B"。
3. 选项生成：使用 v-for 指令遍历 options 数组，动态生成下拉框的选项。每个选项都有一个唯一的 value 和显示文本 text。
4. 禁用初始选项：第一个 <option> 是禁用的（disabled），提示用户选择一个有效选项。