<template>
    <b-form-select v-model="selected" :options="options" class="mb-3">
      <!-- This slot appears above the options from 'options' prop -->
      <template v-slot:first>
        <b-form-select-option :value="null" disabled>-- Please select an option --</b-form-select-option>
      </template>
      <!-- These options will appear after the ones from 'options' prop -->
      <b-form-select-option value="C">Option C</b-form-select-option>
      <b-form-select-option value="D">Option D</b-form-select-option>
    </b-form-select>
    <div class="mt-3">Selected: <strong>{{ selected }}</strong></div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        selected: null,
        options: [
          { value: 'A', text: 'Option A (from options prop)' },
          { value: 'B', text: 'Option B (from options prop)' }
</script>

const options = [
  { text: 'A', value: 'A', disabled: false },
  { text: 'B', value: 'B', disabled: false },
  { text: 'C', value: 'C', disabled: false },
  { text: 'D', value: { d: 1 }, disabled: true },
  { text: 'E', value: 'E', disabled: false },
  { text: 'F', value: 'F', disabled: false }
选项作为对象数组

const options = [
  { text: 'Item 1', value: 'first' },
  { text: 'Item 2', value: 'second' },
  { html: '<b>Item</b> 3', value: 'third', disabled: true },
  { text: 'Item 4' },
  { text: 'Item 5', value: { foo: 'bar', baz: true } }
如果缺少 value ，则 text 将同时用作 value 和 text 字段。 如果使用 html 属性，则 必须 提供 value属性。
New in v2.2.0 要定义选项组，只需添加一个带有 label 属性的对象作为组名，并添加一个带有该组选项数组的 options 属性。
const options = [
  { text: 'Item 1', value: 'first' },
  { text: 'Item 2', value: 'second' },
    label: 'Grouped options',
    options: [{ html: '<b>Item</b> 3', value: 'third', disabled: true }, { text: 'Item 4' }]
  { text: 'Item 5', value: { foo: 'bar', baz: true } }
选项作为对象

不推荐使用
键映射到 value ，值映射到选项 text 。
const options = {
  a: 'Item A',
  b: 'Item B',
  c: { html: 'Item C', disabled: true },
  d: { text: 'Item D', value: 'overridden_value' },
  e: { text: 'Item E', value: { foo: 'bar', baz: true } }
在内部，BootstrapVue 会将上述对象转换为以下数组（ array of objects【对象数组】）格式：
const options = [
  { text: 'Item A', value: 'a', disabled: false },
  { text: 'Item B', value: 'b', disabled: false },
  { html: 'Item C', value: 'c', disabled: false },
  { text: 'Item D', value: 'overridden_value', disabled: true },
  { text: 'Item E', value: { foo: 'bar', baz: true }, disabled: false }
注意： 使用对象格式时，不能 保证最终数组的顺序。因此，建议使用前面提到的任何一种数组格式。
更改选项字段名称

如果要自定义字段属性名称（例如，使用 name 字段显示 text ），可以通过将 text-field ，html-field ，value-field ，和 disabled-field 属性设置为包含以下内容的字符串来轻松更改它们，您想使用的属性名称：
Option A
Option B
Option C
Option D
Selected: A
<template>
    <b-form-select
      v-model="selected"
      :options="options"
      class="mb-3"
      value-field="item"
      text-field="name"
      disabled-field="notEnabled"
    ></b-form-select>
    <div class="mt-3">Selected: <strong>{{ selected }}</strong></div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        selected: 'A',
        options: [
          { item: 'A', name: 'Option A' },
          { item: 'B', name: 'Option B' },
          { item: 'D', name: 'Option C', notEnabled: true },
          { item: { d: 1 }, name: 'Option D' }
</script>
如果 v-model 表达式的初始值与任何选项都不匹配，则 <b-form-select> 组件（在底层为原生 HTML5 <select> ）将呈 未选择 状态。在 iOS 上，这将导致用户无法选择第一项，因为在这种情况下，iOS 不会触发更改事件。因此，建议您提供一个具有空值的禁用选项作为第一个选项。
<b-form-select v-model="selected" :options="options">
  <template v-slot:first>
    <b-form-select-option value="" disabled>-- Please select an option --</b-form-select-option>
  </template>
</b-form-select>
有关更多详细信息，请参见 Vue select 文档。
标准（单一）选择

默认情况下，会应用 Bootstrap v4的自定义选择样式。
单一模式下的值

在非  multiple 模式下，<b-form-select> 返回当前所选选项的单个 value 。
Please select some item
This is First option
Default Selected Option
This is another option
This one is disabled
Selected: 

<template>
    <b-form-select v-model="selected" :options="options"></b-form-select




    
>
    <div class="mt-3">Selected: <strong>{{ selected }}</strong></div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        selected: null,
        options: [
          { value: null, text: 'Please select some item' },
          { value: 'a', text: 'This is First option' },
          { value: 'b', text: 'Default Selected Option' },
          { value: 'c', text: 'This is another option' },
          { value: 'd', text: 'This one is disabled', disabled: true }
</script>
选择大小（显示的行）

您可以使用 select-size 属性将自定义选择切换到选择列表框中，而不是下拉列表中。将 select-size 属性设置为大于 1 的数值，以控制可见多少行选项。
请注意，当 select-size 设置为大于 1 的值时，除非也设置了 multiple 属性，否则将 不会 应用 Bootstrap v4 自定义样式。
请注意，并非所有的移动浏览器都会将选择显示为列表框。
Please select some item
This is option a
Default Selected Option b
This is option c
This one is disabled
This is option e
This is option f
Selected: 

<template>
    <b-form-select v-model="selected" :options="options" :select-size="4"></b-form-select>
    <div class="mt-3">Selected: <strong>{{ selected }}</strong></div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        selected: null,
        options: [
          { value: null, text: 'Please select some item' },
          { value: 'a', text: 'This is option a' },
          { value: 'b', text: 'Default Selected Option b' },
          { value: 'c', text: 'This is option c' },
          { value: 'd', text: 'This one is disabled', disabled: true },
          { value: 'e', text: 'This is option e' },
          { value: 'e', text: 'This is option f' }
</script>
通过设置属性倍数来启用 multiple【多选】模式，并通过将 select-size 设置为要显示的行数来控制在多选列表框中显示多少行。默认设置是让浏览器使用其默认设置（通常为 4）。
多模式下的值

在 multiple 模式下，<b-form-select> 始终返回选项值的数组。在 multiple 种模式下，必须 提供数组引用作为 v-model 。
This is First option
Default Selected Option
This is another option
This one is disabled
This is option e
This is option f
This is option g
Selected: [
<template>
    <b-form-select v-model="selected" :options="options" multiple :select-size="4"></b-form-select>
    <div class="mt-3">Selected: <strong>{{ selected }}</strong></div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        selected: ['b'], // Array reference
        options: [
          { value: 'a', text: 'This is First option' },
          { value: 'b', text: 'Default Selected Option' },
          { value: 'c', text: 'This is another option' },
          { value: 'd', text: 'This one is disabled', disabled: true },
          { value: 'e', text: 'This is option e' },
          { value: 'f', text: 'This is option f' },
          { value: 'g', text: 'This is option g' }
</script>
使用 size 属性将大小控件的表单控件文本大小分别设置为 sm 或 lg ，分别用于小号或大号。
默认情况下，<b-form-select> 将占据显示容器的整个宽度。要控制选择宽度，请将输入放置在标准 Bootstrap 网格列内。
自动获取焦点

当 autofocus 属性设置为 <b-form-select> 时，输入将在插入（即 mounted【安装】）到文档中时自动对焦，或者在 Vue <keep-alive> 组件内部重新激活。请注意，此属性 不会 在输入上设置 autofocus 属性，也无法告诉输入何时可见。
上下文状态

Bootstrap 包括大多数表单控件上 valid 【有效】和 invalid【无效】状态的验证样式。
一般来说，您需要针对特定类型的反馈使用特定状态：
false（表示无效状态）非常适合存在阻塞或必填字段的情况。用户必须正确填写此字段才能提交表单。
true（表示有效状态）非常适合在整个表单中都进行逐字段验证并希望鼓励用户遍历其余字段的情况。
null 不显示验证状态（既不有效也不无效）
要将上下文状态图标之一应用于 <b-form-select> ，请将 state 属性设置为 false（对于无效），true（对于有效）或 null（无验证状态）。
向辅助技术和色盲用户传达上下文验证状态

使用这些上下文状态来表示表单控件的状态仅提供基于颜色的可视指示，而不会将其传达给辅助技术的用户（例如屏幕阅读器）或色盲用户。
确保还提供了备用状态指示。例如，您可以在表单控件的 <label> 文本本身中包含有关状态的提示，或者通过提供其他帮助文本块（通过 <b-form-group> 或 <b-form-*-feedback> ）来提供提示。专门针对辅助技术，还可以为无效的表单控件分配一个 aria-invalid="true" 属性（请参见下文）。
ARIA aria-invalid 属性：

当 <b-form-select> 具有无效的上下文状态（即state = false ）时，您可能还希望将 <b-form-select> 属性 aria-invalid 设置为 true 。
支持的 invalid 值为：
false（默认）未检测到错误
true 该值验证失败。
当 state 设置为 false 时，aria-invalid 也将设置为 true。
非自定义选择

将 plain 属性设置为呈现本机浏览器 <select>（尽管 .form-control 类将始终放在 select 上）。
对于 select-size 属性设置为大于1的非 multiple【多个】选择，将始终呈现 plain【纯】选择。
<b-form-select>

 查看源代码 
<b-form-select> 组件别名 
<b-form-select> 属性 
<b-form-select> v-model 
<b-form-select> 插槽 
<b-form-select> 事件 
<b-form-select> 也可以通过以下别名使用：
<b-select>
 注意：组件别名仅在导入所有 BootstrapVue 或使用组件组插件时可用。 
<b-form-select-option-group> 组件别名 
<b-form-select-option-group> 属性 
<b-form-select-option-group> 插槽 
<b-form-select-option-group> 也可以通过以下别名使用：
<b-select-option-group>
 注意：组件别名仅在导入所有 BootstrapVue 或使用组件组插件时可用。 
import { BFormSelect } from 'bootstrap-vue'
Vue.component('b-form-select', BFormSelect)
 导入为Vue.js插件 

 该插件包括上面列出的所有单个组件。插件还包括任何组件别名。