选择控件

选择控件组件允许用户选择选项。这些组件 must 与 v-model 一起使用，因为它们不维护自己的状态。

用例

template script

  1. <template>
  2.   <v-container class="px-0" fluid>
  3.     <v-checkbox
  4.       v-model="checkbox"
  5.       :label="`Checkbox 1: ${checkbox.toString()}`"
  6.     ></v-checkbox>
  7.     <v-radio-group v-model="radioGroup">
  8.       <v-radio
  9.         v-for="n in 3"
  10.         :key="n"
  11.         :label="`Radio ${n}`"
  12.         :value="n"
  13.       ></v-radio>
  14.     </v-radio-group>
  15.     <v-switch
  16.       v-model="switch1"
  17.       :label="`Switch 1: ${switch1.toString()}`"
  18.     ></v-switch>
  19.   </v-container>
  20. </template>
  1. <script>
  2.   export default {
  3.     data () {
  4.       return {
  5.         checkbox: true,
  6.         radioGroup: 1,
  7.         switch1: true,
  8.       }
  9.     },
  10.   }
  11. </script>

Selection controls（选择控件） - 图1

API

从下面选择您想要的组件，并查看可用的属性、插槽、事件和函数。

Selection controls（选择控件） - 图2

实战场

template script

  1. <template>
  2.   <div>
  3.     <v-row justify="space-around">
  4.       <v-checkbox v-model="disabled" class="mx-2" label="Disabled"></v-checkbox>
  5.       <v-checkbox v-model="readonly" class="mx-2" label="Read-only"></v-checkbox>
  6.       <v-checkbox v-model="error" class="mx-2" label="Error"></v-checkbox>
  7.       <v-checkbox v-model="success" class="mx-2" label="Success"></v-checkbox>
  8.       <v-col cols="12">
  9.         <v-select v-model="color" :items="colors" label="Color"></v-select>
  10.       </v-col>
  11.       <v-col cols="12">
  12.         <header>Checkboxes</header>
  13.       </v-col>
  14.       <v-checkbox v-model="loading" class="mx-2" label="Loading"></v-checkbox>
  15.       <v-checkbox v-model="flat" class="mx-2" label="Flat"></v-checkbox>
  16.       <v-checkbox v-model="inset" class="mx-2" label="Inset"></v-checkbox>
  17.       <v-col cols="12">
  18.         <header>Switches</header>
  19.       </v-col>
  20.       <v-switch v-model="mandatory" class="mx-2" label="Mandatory"></v-switch>
  21.       <v-switch v-model="multiple" class="mx-2" label="Multiple"></v-switch>
  22.       <v-switch v-model="row" class="mx-2" label="Row"></v-switch>
  23.       <v-col cols="12">
  24.         <header>Radios</header>
  25.       </v-col>
  26.       <v-radio-group>
  27.         <v-radio
  28.           v-for="n in 3"
  29.           :key="n"
  30.           :label="`Radio ${n}`"
  31.           :value="n"
  32.         ></v-radio>
  33.       </v-radio-group>
  34.     </v-row>
  35.     <v-switch
  36.       :disabled="disabled"
  37.       :readonly="readonly"
  38.       :loading="loading"
  39.       :flat="flat"
  40.       :inset="inset"
  41.       :error="error"
  42.       :success="success"
  43.       :color="color"
  44.       label="I'm a switch"
  45.     ></v-switch>
  46.     <v-radio-group
  47.       :disabled="disabled"
  48.       :readonly="readonly"
  49.       :mandatory="mandatory"
  50.       :multiple="multiple"
  51.       :error="error"
  52.       :success="success"
  53.       :row="row"
  54.       :color="color"
  55.     >
  56.       <v-radio label="I'm a radio button"></v-radio>
  57.       <v-radio label="I'm a radio button"></v-radio>
  58.       <v-radio label="I'm a radio button"></v-radio>
  59.     </v-radio-group>
  60.     <v-switch v-model="indeterminate" class="mx-2" label="Indeterminate"></v-switch>
  61.     <v-checkbox
  62.       :disabled="disabled"
  63.       :readonly="readonly"
  64.       :indeterminate="indeterminate"
  65.       :error="error"
  66.       :success="success"
  67.       :color="color"
  68.       label="I'm a checkbox"
  69.     ></v-checkbox>
  70.   </div>
  71. </template>
  1. <script>
  2.   export default {
  3.     data: () => ({
  4.       disabled: false,
  5.       readonly: false,
  6.       loading: false,
  7.       flat: false,
  8.       inset: false,
  9.       error: false,
  10.       success: false,
  11.       mandatory: false,
  12.       multiple: false,
  13.       row: false,
  14.       indeterminate: false,
  15.       color: 'accent',
  16.       colors: [
  17.         'accent',
  18.         'teal',
  19.         'blue',
  20.         'error',
  21.         'success',
  22.       ],
  23.     }),
  24.   }
  25. </script>

Selection controls（选择控件） - 图3

示例

下面是一些简单到复杂的例子。

复选框 - 布尔值

template script

  1. <template>
  2.   <v-container fluid>
  3.     <v-checkbox v-model="checkbox1" :label="`Checkbox 1: ${checkbox1.toString()}`"></v-checkbox>
  4.     <v-checkbox v-model="checkbox2" :label="`Checkbox 2: ${checkbox2.toString()}`"></v-checkbox>
  5.   </v-container>
  6. </template>
  1. <script>
  2.   export default {
  3.     data () {
  4.       return {
  5.         checkbox1: true,
  6.         checkbox2: false,
  7.       }
  8.     },
  9.   }
  10. </script>

Selection controls（选择控件） - 图4

复选框 - 数组

template script

  1. <template>
  2.   <v-container fluid>
  3.     <p>{{ selected }}</p>
  4.     <v-checkbox v-model="selected" label="John" value="John"></v-checkbox>
  5.     <v-checkbox v-model="selected" label="Jacob" value="Jacob"></v-checkbox>
  6.   </v-container>
  7. </template>
  1. <script>
  2.   export default {
  3.     data () {
  4.       return {
  5.         selected: ['John'],
  6.       }
  7.     },
  8.   }
  9. </script>

Selection controls（选择控件） - 图5

复选框 - 状态

template

  1. <template>
  2.   <v-container fluid>
  3.     <v-row class="light--text">
  4.       <v-col cols="4">on</v-col>
  5.       <v-col cols="4">off</v-col>
  6.       <v-col cols="4">indeterminate</v-col>
  7.     </v-row>
  8.     <v-row>
  9.       <v-col cols="4">
  10.         <v-checkbox input-value="true" value></v-checkbox>
  11.       </v-col>
  12.       <v-col cols="4">
  13.         <v-checkbox value></v-checkbox>
  14.       </v-col>
  15.       <v-col cols="4">
  16.         <v-checkbox value indeterminate></v-checkbox>
  17.       </v-col>
  18.     </v-row>
  19.     <v-row class="light--text">
  20.       <v-col cols="4">on disabled</v-col>
  21.       <v-col cols="4">off disabled</v-col>
  22.     </v-row>
  23.     <v-row>
  24.       <v-col cols="4">
  25.         <v-checkbox input-value="true" value disabled></v-checkbox>
  26.       </v-col>
  27.       <v-col cols="4">
  28.         <v-checkbox value disabled></v-checkbox>
  29.       </v-col>
  30.     </v-row>
  31.   </v-container>
  32. </template>

Selection controls（选择控件） - 图6

复选框 - 色彩

复选框可以设置颜色通过使用 color 属性，颜色可以是任何内置的颜色或者其上下文名称。

template script

  1. <template>
  2.   <v-card flat>
  3.     <v-card-text>
  4.       <v-container fluid>
  5.         <v-row>
  6.           <v-col cols="12" sm="4" md="4">
  7.             <v-checkbox
  8.               v-model="ex4"
  9.               label="red"
  10.               color="red"
  11.               value="red"
  12.               hide-details
  13.             ></v-checkbox>
  14.             <v-checkbox
  15.               v-model="ex4"
  16.               label="red darken-3"
  17.               color="red darken-3"
  18.               value="red darken-3"
  19.               hide-details
  20.             ></v-checkbox>
  21.           </v-col>
  22.           <v-col cols="12" sm="4" md="4">
  23.             <v-checkbox
  24.               v-model="ex4"
  25.               label="indigo"
  26.               color="indigo"
  27.               value="indigo"
  28.               hide-details
  29.             ></v-checkbox>
  30.             <v-checkbox
  31.               v-model="ex4"
  32.               label="indigo darken-3"
  33.               color="indigo darken-3"
  34.               value="indigo darken-3"
  35.               hide-details
  36.             ></v-checkbox>
  37.           </v-col>
  38.           <v-col cols="12" sm="4" md="4">
  39.             <v-checkbox
  40.               v-model="ex4"
  41.               label="orange"
  42.               color="orange"
  43.               value="orange"
  44.               hide-details
  45.             ></v-checkbox>
  46.             <v-checkbox
  47.               v-model="ex4"
  48.               label="orange darken-3"
  49.               color="orange darken-3"
  50.               value="orange darken-3"
  51.               hide-details
  52.             ></v-checkbox>
  53.           </v-col>
  54.         </v-row>
  56.         <v-row class="mt-12">
  57.           <v-col cols="12" sm="4" md="4">
  58.             <v-checkbox
  59.               v-model="ex4"
  60.               label="primary"
  61.               color="primary"
  62.               value="primary"
  63.               hide-details
  64.             ></v-checkbox>
  65.             <v-checkbox
  66.               v-model="ex4"
  67.               label="secondary"
  68.               color="secondary"
  69.               value="secondary"
  70.               hide-details
  71.             ></v-checkbox>
  72.           </v-col>
  73.           <v-col cols="12" sm="4" md="4">
  74.             <v-checkbox
  75.               v-model="ex4"
  76.               label="success"
  77.               color="success"
  78.               value="success"
  79.               hide-details
  80.             ></v-checkbox>
  81.             <v-checkbox
  82.               v-model="ex4"
  83.               label="info"
  84.               color="info"
  85.               value="info"
  86.               hide-details
  87.             ></v-checkbox>
  88.           </v-col>
  89.           <v-col cols="12" sm="4" md="4">
  90.             <v-checkbox
  91.               v-model="ex4"
  92.               label="warning"
  93.               color="warning"
  94.               value="warning"
  95.               hide-details
  96.             ></v-checkbox>
  97.             <v-checkbox
  98.               v-model="ex4"
  99.               label="error"
  100.               color="error"
  101.               value="error"
  102.               hide-details
  103.             ></v-checkbox>
  104.           </v-col>
  105.         </v-row>
  106.       </v-container>
  107.     </v-card-text>
  108.   </v-card>
  109. </template>
  1. <script>
  2.   export default {
  3.     data () {
  4.       return {
  5.         ex4: ['red', 'indigo', 'orange', 'primary', 'secondary', 'success', 'info', 'warning', 'error', 'red darken-3', 'indigo darken-3', 'orange darken-3'],
  6.       }
  7.     },
  8.   }
  9. </script>

Selection controls（选择控件） - 图7

复选框 - 和文本框内联

template script

  1. <template>
  2.   <v-card>
  3.     <v-card-text>
  4.       <v-row align="center">
  5.         <v-checkbox
  6.           v-model="includeFiles"
  7.           hide-details
  8.           class="shrink mr-2 mt-0"
  9.         ></v-checkbox>
  10.         <v-text-field label="Include files"></v-text-field>
  11.       </v-row>
  12.       <v-row align="center">
  13.         <v-checkbox
  14.           v-model="enabled"
  15.           hide-details
  16.           class="shrink mr-2 mt-0"
  17.         ></v-checkbox>
  18.         <v-text-field
  19.           :disabled="!enabled"
  20.           label="I only work if you check the box"
  21.         ></v-text-field>
  22.       </v-row>
  23.     </v-card-text>
  24.   </v-card>
  25. </template>
  1. <script>
  2.   export default {
  3.     data: () => ({
  4.       includeFiles: true,
  5.       enabled: false,
  6.     }),
  7.   }
  8. </script>

Selection controls（选择控件） - 图8

单选框 - 默认

默认情况下，单选框组是强制性的。这可以通过 mandatory 属性来改变。

template script

  1. <template>
  2.   <v-container fluid>
  3.     <p>{{ radios || 'null' }}</p>
  4.     <v-radio-group v-model="radios" :mandatory="false">
  5.       <v-radio label="Radio 1" value="radio-1"></v-radio>
  6.       <v-radio label="Radio 2" value="radio-2"></v-radio>
  7.     </v-radio-group>
  8.   </v-container>
  9. </template>
  1. <script>
  2.   export default {
  3.     data () {
  4.       return {
  5.         radios: 'radio-1',
  6.       }
  7.     },
  8.   }
  9. </script>

Selection controls（选择控件） - 图9

单选框 - 方向

单选框组可以作为一行或者一列的形式，通过使用 column 或者 row 属性设置，默认是使用列的方式。

template script

  1. <template>
  2.   <v-container fluid>
  3.     <v-radio-group v-model="column" column>
  4.       <v-radio label="Option 1" value="radio-1"></v-radio>
  5.       <v-radio label="Option 2" value="radio-2"></v-radio>
  6.     </v-radio-group>
  7.     <hr>
  8.     <v-radio-group v-model="row" row>
  9.       <v-radio label="Option 1" value="radio-1"></v-radio>
  10.       <v-radio label="Option 2" value="radio-2"></v-radio>
  11.     </v-radio-group>
  12.   </v-container>
  13. </template>
  1. <script>
  2.   export default {
  3.     data () {
  4.       return {
  5.         column: null,
  6.         row: null,
  7.       }
  8.     },
  9.   }
  10. </script>

Selection controls（选择控件） - 图10

单选框 - 颜色

单选框也是可以通过 color 属性使用内置的颜色来设置色彩。

template script

  1. <template>
  2.   <v-card flat>
  3.     <v-card-text>
  4.       <v-container fluid>
  5.         <v-row>
  6.           <v-col cols="12" sm="6" md="6">
  7.             <v-radio-group v-model="ex7" column>
  8.               <v-radio
  9.                 label="red"
  10.                 color="red"
  11.                 value="red"
  12.               ></v-radio>
  13.               <v-radio
  14.                 label="red darken-3"
  15.                 color="red darken-3"
  16.                 value="red darken-3"
  17.               ></v-radio>
  18.               <v-radio
  19.                 label="indigo"
  20.                 color="indigo"
  21.                 value="indigo"
  22.               ></v-radio>
  23.               <v-radio
  24.                 label="indigo darken-3"
  25.                 color="indigo darken-3"
  26.                 value="indigo darken-3"
  27.               ></v-radio>
  28.               <v-radio
  29.                 label="orange"
  30.                 color="orange"
  31.                 value="orange"
  32.               ></v-radio>
  33.               <v-radio
  34.                 label="orange darken-3"
  35.                 color="orange darken-3"
  36.                 value="orange darken-3"
  37.               ></v-radio>
  38.             </v-radio-group>
  39.           </v-col>
  40.           <v-col cols="12" sm="6" md="6">
  41.             <v-radio-group v-model="ex8" column>
  42.               <v-radio
  43.                 label="primary"
  44.                 color="primary"
  45.                 value="primary"
  46.               ></v-radio>
  47.               <v-radio
  48.                 label="secondary"
  49.                 color="secondary"
  50.                 value="secondary"
  51.               ></v-radio>
  52.               <v-radio
  53.                 label="success"
  54.                 color="success"
  55.                 value="success"
  56.               ></v-radio>
  57.               <v-radio
  58.                 label="info"
  59.                 color="info"
  60.                 value="info"
  61.               ></v-radio>
  62.               <v-radio
  63.                 label="warning"
  64.                 color="warning"
  65.                 value="warning"
  66.               ></v-radio>
  67.               <v-radio
  68.                 label="error"
  69.                 color="error"
  70.                 value="error"
  71.               ></v-radio>
  72.             </v-radio-group>
  73.           </v-col>
  74.         </v-row>
  75.       </v-container>
  76.     </v-card-text>
  77.   </v-card>
  78. </template>
  1. <script>
  2.   export default {
  3.     data () {
  4.       return {
  5.         ex7: 'red',
  6.         ex8: 'primary',
  7.       }
  8.     },
  9.   }
  10. </script>

Selection controls（选择控件） - 图11

Material Dashboard Free

Vuetify Material Dashboard Free is a beautiful resource built over Vuetify, Vuex and Vue.js. It will help you get started developing dashboards in no time.

ads by Vuetify

](https://www.creative-tim.com/product/vuetify-material-dashboard?ref=vuetifyjs.com&partner=116160)

开关 - 布尔值

template script

  1. <template>
  2.   <v-container fluid>
  3.     <v-switch v-model="switch1" :label="`Switch 1: ${switch1.toString()}`"></v-switch>
  4.     <v-switch v-model="switch2" :label="`Switch 2: ${switch2.toString()}`"></v-switch>
  5.   </v-container>
  6. </template>
  1. <script>
  2.   export default {
  3.     data () {
  4.       return {
  5.         switch1: true,
  6.         switch2: false,
  7.       }
  8.     },
  9.   }
  10. </script>

Selection controls（选择控件） - 图12

开关 - 数组

template script

  1. <template>
  2.   <v-container fluid>
  3.     <p>{{ people }}</p>
  4.     <v-switch v-model="people" label="John" value="John"></v-switch>
  5.     <v-switch v-model="people" label="Jacob" value="Jacob"></v-switch>
  6.   </v-container>
  7. </template>
  1. <script>
  2.   export default {
  3.     data () {
  4.       return {
  5.         people: ['John'],
  6.       }
  7.     },
  8.   }
  9. </script>

Selection controls（选择控件） - 图13

开关 - 状态

template

  1. <template>
  2.   <v-container fluid>
  3.     <v-row class="dark--text">
  4.       <v-col cols="6">on</v-col>
  5.       <v-col cols="6">off</v-col>
  6.     </v-row>
  7.     <v-row>
  8.       <v-col cols="6">
  9.         <v-switch value input-value="true"></v-switch>
  10.       </v-col>
  11.       <v-col cols="6">
  12.         <v-switch></v-switch>
  13.       </v-col>
  14.     </v-row>
  15.     <v-row class="dark--text">
  16.       <v-col cols="6">on disabled</v-col>
  17.       <v-col cols="6">off disabled</v-col>
  18.     </v-row>
  19.     <v-row>
  20.       <v-col cols="6">
  21.         <v-switch value input-value="true" disabled></v-switch>
  22.       </v-col>
  23.       <v-col cols="6">
  24.         <v-switch disabled></v-switch>
  25.       </v-col>
  26.     </v-row>
  27.     <v-row class="dark--text">
  28.       <v-col cols="6">on loading</v-col>
  29.       <v-col cols="6">off loading</v-col>
  30.     </v-row>
  31.     <v-row>
  32.       <v-col cols="6">
  33.         <v-switch loading="warning" value input-value="true"></v-switch>
  34.       </v-col>
  35.       <v-col cols="6">
  36.         <v-switch loading="warning"></v-switch>
  37.       </v-col>
  38.     </v-row>
  39.   </v-container>
  40. </template>

Selection controls（选择控件） - 图14

开关 - 颜色

开关也可以通过 color 属性使用内置的颜色来设置色彩。

template script

  1. <template>
  2.   <v-card flat>
  3.     <v-card-text>
  4.       <v-container fluid>
  5.         <v-row>
  6.           <v-col cols="12" sm="4" md="4">
  7.             <v-switch
  8.               v-model="ex11"
  9.               label="red"
  10.               color="red"
  11.               value="red"
  12.               hide-details
  13.             ></v-switch>
  14.             <v-switch
  15.               v-model="ex11"
  16.               label="red darken-3"
  17.               color="red darken-3"
  18.               value="red darken-3"
  19.               hide-details
  20.             ></v-switch>
  21.           </v-col>
  22.           <v-col cols="12" sm="4" md="4">
  23.             <v-switch
  24.               v-model="ex11"
  25.               label="indigo"
  26.               color="indigo"
  27.               value="indigo"
  28.               hide-details
  29.             ></v-switch>
  30.             <v-switch
  31.               v-model="ex11"
  32.               label="indigo darken-3"
  33.               color="indigo darken-3"
  34.               value="indigo darken-3"
  35.               hide-details
  36.             ></v-switch>
  37.           </v-col>
  38.           <v-col cols="12" sm="4" md="4">
  39.             <v-switch
  40.               v-model="ex11"
  41.               label="orange"
  42.               color="orange"
  43.               value="orange"
  44.               hide-details
  45.             ></v-switch>
  46.             <v-switch
  47.               v-model="ex11"
  48.               label="orange darken-3"
  49.               color="orange darken-3"
  50.               value="orange darken-3"
  51.               hide-details
  52.             ></v-switch>
  53.           </v-col>
  54.         </v-row>
  56.         <v-row class="mt-12">
  57.           <v-col cols="12" sm="4" md="4">
  58.             <v-switch
  59.               v-model="ex11"
  60.               label="primary"
  61.               color="primary"
  62.               value="primary"
  63.               hide-details
  64.             ></v-switch>
  65.             <v-switch
  66.               v-model="ex11"
  67.               label="secondary"
  68.               color="secondary"
  69.               value="secondary"
  70.               hide-details
  71.             ></v-switch>
  72.           </v-col>
  73.           <v-col cols="12" sm="4" md="4">
  74.             <v-switch
  75.               v-model="ex11"
  76.               label="success"
  77.               color="success"
  78.               value="success"
  79.               hide-details
  80.             ></v-switch>
  81.             <v-switch
  82.               v-model="ex11"
  83.               label="info"
  84.               color="info"
  85.               value="info"
  86.               hide-details
  87.             ></v-switch>
  88.           </v-col>
  89.           <v-col cols="12" sm="4" md="4">
  90.             <v-switch
  91.               v-model="ex11"
  92.               label="warning"
  93.               color="warning"
  94.               value="warning"
  95.               hide-details
  96.             ></v-switch>
  97.             <v-switch
  98.               v-model="ex11"
  99.               label="error"
  100.               color="error"
  101.               value="error"
  102.               hide-details
  103.             ></v-switch>
  104.           </v-col>
  105.         </v-row>
  106.       </v-container>
  107.     </v-card-text>
  108.   </v-card>
  109. </template>
  1. <script>
  2.   export default {
  3.     data () {
  4.       return {
  5.         ex11: ['red', 'indigo', 'orange', 'primary', 'secondary', 'success', 'info', 'warning', 'error', 'red darken-3', 'indigo darken-3', 'orange darken-3'],
  6.       }
  7.     },
  8.   }
  9. </script>

Selection controls（选择控件） - 图15

开关 - 扁平

您可以使用 flat 属性，在不高亮的情况下进行开关渲染。

template script

  1. <template>
  2.   <v-sheet color="grey lighten-3" width="100%" height="100%" class="pa-12">
  3.     <v-switch v-model="switch1" flat :label="`Switch 1: ${switch1.toString()}`"></v-switch>
  4.     <v-switch v-model="switch2" flat :label="`Switch 2: ${switch2.toString()}`"></v-switch>
  5.   </v-sheet>
  6. </template>
  1. <script>
  2.   export default {
  3.     data () {
  4.       return {
  5.         switch1: true,
  6.         switch2: false,
  7.       }
  8.     },
  9.   }
  10. </script>

Selection controls（选择控件） - 图16

开关 - 嵌入

您可以在嵌入模式下使开关渲染。

template script

  1. <template>
  2.   <v-sheet class="pa-5">
  3.     <v-switch v-model="switch1" inset :label="`Switch 1: ${switch1.toString()}`"></v-switch>
  4.     <v-switch v-model="switch2" inset :label="`Switch 2: ${switch2.toString()}`"></v-switch>
  5.   </v-sheet>
  6. </template>
  1. <script>
  2.   export default {
  3.     data () {
  4.       return {
  5.         switch1: true,
  6.         switch2: false,
  7.       }
  8.     },
  9.   }
  10. </script>

Selection controls（选择控件） - 图17

标签插槽

选择控件标签可以在 label 插槽中定义 - 这将允许使用 HTML 内容

template script

  1. <template>
  2.   <v-container fluid>
  3.     <v-checkbox v-model="checkbox">
  4.       <template v-slot:label>
  5.         <div>
  6.           I agree that
  7.           <v-tooltip bottom>
  8.             <template v-slot:activator="{ on }">
  9.               <a
  10.                 target="_blank"
  11.                 href="http://vuetifyjs.com"
  12.                 @click.stop
  13.                 v-on="on"
  14.               >
  15.                 Vuetify
  16.               </a>
  17.             </template>
  18.             Opens in new window
  19.           </v-tooltip>
  20.           is awesome
  21.         </div>
  22.       </template>
  23.     </v-checkbox>
  25.     <v-radio-group v-model="radios">
  26.       <template v-slot:label>
  27.         <div>Your favourite <strong>search engine</strong></div>
  28.       </template>
  29.       <v-radio value="Google">
  30.         <template v-slot:label>
  31.           <div>Of course it's <strong class="success--text">Google</strong></div>
  32.         </template>
  33.       </v-radio>
  34.       <v-radio value="Duckduckgo">
  35.         <template v-slot:label>
  36.           <div>Definitely <strong class="primary--text">Duckduckgo</strong></div>
  37.         </template>
  38.       </v-radio>
  39.     </v-radio-group>
  41.     <v-switch v-model="switchMe">
  42.       <template v-slot:label>
  43.         Turn on the progress: <v-progress-circular :indeterminate="switchMe" :value="0" size="24" class="ml-2"></v-progress-circular>
  44.       </template>
  45.     </v-switch>
  46.   </v-container>
  47. </template>
  1. <script>
  2.   export default {
  3.     data () {
  4.       return {
  5.         checkbox: false,
  6.         radios: 'Duckduckgo',
  7.         switchMe: false,
  8.       }
  9.     },
  10.   }
  11. </script>

Selection controls（选择控件） - 图18