vant/docs/markdown/zh-CN/radio.md

Radio 单选框

使用指南

import { Radio } from 'vant';

Vue.use(Radio);

代码演示

基础用法

通过v-model绑定值即可。当Radio选中时，绑定的值即为Radio中name属性设置的值。

<van-radio name="1" v-model="radio">单选框 1</van-radio>
<van-radio name="2" v-model="radio">单选框 2</van-radio>

export default {
  data() {
    return {
      radio: '1'
    }
  }
};

禁用状态

设置disabled属性即可，此时Radio不能点击。

<van-radio name="1" v-model="radio" disabled>未选中禁用</van-radio>
<van-radio name="2" v-model="radio" disabled>选中且禁用</van-radio>

Radio 组

需要与van-radio-group一起使用，在van-radio-group通过v-model来绑定当前选中的值。例如下面的radio3：

<van-radio-group v-model="radio">
  <van-radio name="1">单选框 1</van-radio>
  <van-radio name="2">单选框 2</van-radio>
</van-radio-group>

与 Cell 组件一起使用

此时你需要再引入Cell和CellGroup组件。

<van-radio-group v-model="radio">
  <van-cell-group>
    <van-cell><van-radio name="1">单选框 1</van-radio></van-cell>
    <van-cell><van-radio name="2">单选框 2</van-radio></van-cell>
  </van-cell-group>
</van-radio-group>

Radio API

参数	说明	类型	默认值	可选值
disabled	是否禁用单选框	Boolean	false	-
name	根据这个来判断 radio 是否选中	Boolean	false	-

RadioGroup API

参数	说明	类型	默认值	可选值
disabled	是否禁用单选框	Boolean	false	-

RadioGroup Event

事件名称	说明	回调参数
change	当绑定值变化时触发的事件	当前组件的值