单选框
QRadio 组件是采集用户输入的一个基本元素。您可以使用它为用户提供一种从多个选项中选择选项的方法。
TIP
关于创建一组单选框的其他可能性，请参阅 QOptionGroup。
QRadio API
QRadio API
props
14
slots
1
events
1
methods
1
behavior
2
general
1
icons
2
label
2
model
2
state
1
style
4
name
: String
说明
用于指定控件的名称；如果处理直接提交到 URL 的表单时很有用
keep-color
: Boolean
说明
当复选框取消选中时，是否保留颜色（如果指定了任何颜色）？
用法
标准
Standard
Template
Script
All
<template>
<div class="q-pa-md">
<div class="q-gutter-sm">
<q-radio v-model="shape" val="line" label="Line" />
<q-radio v-model="shape" val="rectangle" label="Rectangle" />
<q-radio v-model="shape" val="ellipse" label="Ellipse" />
<q-radio v-model="shape" val="polygon" label="Polygon" />
</div>
<div class="q-px-sm">
Your selection is: <strong>{{ shape }}</strong>
</div>
</div>
</template>Copied to clipboard
Line
Rectangle
Ellipse
Polygon
Your selection is: line
自定义图标 v2.5+
With icons
Template
Script
All
<template>
<div class="q-pa-md">
<div class="q-gutter-sm">
<q-radio v-model="shape" checked-icon="task_alt" unchecked-icon="panorama_fish_eye" val="line" label="Line" />
<q-radio v-model="shape" checked-icon="task_alt" unchecked-icon="panorama_fish_eye" val="rectangle" label="Rectangle" />
<q-radio v-model="shape" checked-icon="task_alt" unchecked-icon="panorama_fish_eye" val="ellipse" label="Ellipse" />
<q-radio v-model="shape" checked-icon="task_alt" unchecked-icon="panorama_fish_eye" val="polygon" label="Polygon" />
</div>
<div class="q-px-sm">
Your selection is: <strong>{{ shape }}</strong>
</div>
</div>
</template>Copied to clipboard
task_alt
Line
panorama_fish_eye
Rectangle
panorama_fish_eye
Ellipse
panorama_fish_eye
Polygon
Your selection is: line
紧凑模式
紧凑模式
Template
Script
All
<template>
<div class="q-pa-md q-gutter-sm">
<div class="q-gutter-sm">
<q-radio dense v-model="shape" val="line" label="Line" />
<q-radio dense v-model="shape" val="rectangle" label="Rectangle" />
<q-radio dense v-model="shape" val="ellipse" label="Ellipse" />
<q-radio dense v-model="shape" val="polygon" label="Polygon" />
</div>
<div class="q-px-sm q-pt-sm">
Your selection is: <strong>{{ shape }}</strong>
</div>
</div>
</template>Copied to clipboard
Line
Rectangle
Ellipse
Polygon
Your selection is: line
着色
在下面示例的第二行中，即使单选按钮未处于切换状态，设置了 keep-color 属性依然会进行着色。
着色
Template
Script
All
<template>
<div class="q-pa-md">
<div class="q-gutter-sm">
<q-radio v-model="color" val="teal" label="Teal" color="teal" />
<q-radio v-model="color" val="orange" label="Orange" color="orange" />
<q-radio v-model="color" val="red" label="Red" color="red" />
<q-radio v-model="color" val="cyan" label="Cyan" color="cyan" />
</div>
<div class="q-gutter-sm">
<q-radio keep-color v-model="color" val="teal" label="Teal" color="teal" />
<q-radio keep-color v-model="color" val="orange" label="Orange" color="orange" />
<q-radio keep-color v-model="color" val="red" label="Red" color="red" />
<q-radio keep-color v-model="color" val="cyan" label="Cyan" color="cyan" />
</div>
<div class="q-px-sm q-mt-sm">
Your selection is: <strong>{{ color }}</strong>
</div>
</div>
</template>Copied to clipboard
Teal
Orange
Red
Cyan
Teal
Orange
Red
Cyan
Your selection is: cyan
黑色背景和禁用
黑色背景
Template
Script
All
<template>
<div class="q-pa-md bg-grey-10 text-white">
<div class="q-gutter-sm">
<q-radio dark v-model="shape" val="line" label="Line" />
<q-radio dark v-model="shape" val="rectangle" label="Rectangle" />
<q-radio dark v-model="shape" val="ellipse" label="Ellipse" />
<q-radio dark v-model="shape" val="polygon" label="Polygon" />
</div>
<div class="q-px-sm">
Your selection is: <strong>{{ shape }}</strong>
</div>
</div>
</template>Copied to clipboard
Line
Rectangle
Ellipse
Polygon
Your selection is: line
禁用
Template
Script
All
<template>
<div class="q-pa-md">
<div class="q-gutter-sm">
<q-radio disable v-model="shape" val="line" label="Line" />
<q-radio disable v-model="shape" val="rectangle" label="Rectangle" />
<q-radio disable v-model="shape" val="ellipse" label="Ellipse" />
<q-radio disable v-model="shape" val="polygon" label="Polygon" />
</div>
</div>
</template>Copied to clipboard
Line
Rectangle
Ellipse
Polygon
标签放在左边
标签放在左边
Template
Script
All
<template>
<div class="q-pa-md">
<div class="q-gutter-sm">
<q-radio left-label v-model="shape" val="line" label="Line" />
<q-radio left-label v-model="shape" val="rectangle" label="Rectangle" />
<q-radio left-label v-model="shape" val="ellipse" label="Ellipse" />
<q-radio left-label v-model="shape" val="polygon" label="Polygon" />
</div>
<div class="q-gutter-sm">
<q-radio left-label v-model="shape" dense val="line" label="Line" />
<q-radio left-label v-model="shape" dense val="rectangle" label="Rectangle" />
<q-radio left-label v-model="shape" dense val="ellipse" label="Ellipse" />
<q-radio left-label v-model="shape" dense val="polygon" label="Polygon" />
</div>
<div class="q-mt-md">
Your selection is: <strong>{{ shape }}</strong>
</div>
</div>
</template>Copied to clipboard
Line
Rectangle
Ellipse
Polygon
Line
Rectangle
Ellipse
Polygon
Your selection is: line
大小
除了下面的标准尺寸，您可以通过 size 属性定义自己的尺寸（最后一个示例是自定义尺寸）。
标准尺寸
Template
Script
All
<template>
<div class="q-pa-md">
<div class="q-gutter-sm">
<q-radio size="xs" v-model="shape" val="xs" label="Size 'xs'" />
<q-radio size="sm" v-model="shape" val="sm" label="Size 'sm'" />
<q-radio size="md" v-model="shape" val="md" label="Size 'md'" />
<q-radio size="lg" v-model="shape" val="lg" label="Size 'lg'" />
<q-radio size="xl" v-model="shape" val="xl" label="Size 'xl'" />
<!-- custom size -->
<q-radio size="150px" v-model="shape" val="150px" label="Size '150px'" />
</div>
<div class="q-px-sm">
Your selection is: <strong>{{ shape }}</strong>
</div>
</div>
</template>Copied to clipboard
Size 'xs'
Size 'sm'
Size 'md'
Size 'lg'
Size 'xl'
Size '150px'
Your selection is: line
搭配 QOptionGroup
TIP
您还可以使用 QOptionGroup，当您有多组单选框时，它可以简化使用，如下面的示例所示。
与 QOptionGroup 一起使用
Template
Script
All
<template>
<div class="q-pa-md">
<q-option-group
:options="options"
type="radio"
v-model="group"
/>
</div>
</template>Copied to clipboard
Battery too low
Friend request
Picture uploaded
搭配 QItem
在下面的示例中，我们 渲染了一个 <label> 标签（注意 tag="label"），因此 QRadio 将响应 QItems 上的点击以更改切换状态。
搭配 QItem
Template
Script
All
<template>
<div class="q-pa-md">
<q-list>
<!--
Rendering a <label> tag (notice tag="label")
so QRadios will respond to clicks on QItems to
change Toggle state.
-->
<q-item tag="label" v-ripple>
<q-item-section avatar>
<q-radio v-model="color" val="teal" color="teal" />
</q-item-section>
<q-item-section>
<q-item-label>Teal</q-item-label>
</q-item-section>
</q-item>
<q-item tag="label" v-ripple>
<q-item-section avatar>
<q-radio v-model="color" val="orange" color="orange" />
</q-item-section>
<q-item-section>
<q-item-label>Orange</q-item-label>
<q-item-label caption>With description </q-item-label>
</q-item-section>
</q-item>
<q-item tag="label" v-ripple>
<q-item-section avatar top>
<q-radio v-model="color" val="cyan" color="cyan" />
</q-item-section>
<q-item-section>
<q-item-label>Cyan</q-item-label>
<q-item-label caption>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</q-item-label>
</q-item-section>
</q-item>
</q-list>
<div class="q-px-sm q-mt-sm">
Your selection is: <strong>{{ color }}</strong>
</div>
</div>
</template>Copied to clipboard
Your selection is: cyan
原生表单提交
当处理一个带有 action 和 method 的原生表单时（如：使用 Quasar 和 ASP.NET 控制器时），您需要为 QRadio 声明 name 属性，否则表单数据中不会包含它：
原生表单
Template
Script
All
<template>
<div class="q-pa-md">
<q-form @submit="onSubmit" class="q-gutter-md">
<q-radio name="shape" v-model="shape" val="line" label="Line" />
<q-radio name="shape" v-model="shape" val="rectangle" label="Rectangle" />
<q-radio name="shape" v-model="shape" val="ellipse" label="Ellipse" />
<q-radio name="shape" v-model="shape" val="polygon" label="Polygon" />
<div>
<q-btn label="Submit" type="submit" color="primary"/>
</div>
</q-form>
<q-card v-if="submitResult.length > 0" flat bordered class="q-mt-md bg-grey-2">
<q-card-section>Submitted form contains the following formData (key = value):</q-card-section>
<q-separator />
<q-card-section class="row q-gutter-sm items-center">
<div
v-for="(item, index) in submitResult"
:key="index"
class="q-px-sm q-py-xs bg-grey-8 text-white rounded-borders text-center text-no-wrap"
>{{ item.name }} = {{ item.value }}</div>
</q-card-section>
</q-card>
</div>
</template>Copied to clipboard
版权声明 本中文文档内容版权为站长个人所有，保留所有权利。
免责声明 本站点所包含的任何跳转链接均为第三方广告内容，站点对这些广告内容的准确性、合法性、真实性不承担任何责任。用户点击跳转链接进入第三方网站后，应自行判断广告内容的真实性和合法性，并自行承担因使用广告内容而产生的风险和责任。任何因使用第三方广告内容而导致的损失或损害，本站点概不负责。