vant/docs/examples-docs/radio.md

Radio 单选框

使用指南

import { Radio } from 'vant';

Vue.component(Radio.name, Radio);

代码演示

基础用法

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

:::demo 基础用法

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

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

:::

禁用状态

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

:::demo 禁用状态

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

export default {
  data() {
    return {
      radio2: '2'
    }
  }
};

:::

radio组

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

:::demo radio组

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

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

:::

与Cell组件一起使用

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

:::demo 与Cell组件一起使用

<van-radio-group v-model="radio4">
  <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>

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

:::

Radio API

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

RadioGroup API

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

RadioGroup Event

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