vue2组件系列第十九节:Radio 单选框(基础应用)

项目开发过程中缺不了form表单，也缺不了radio。Radio单选框组件将分成两节内容，第一节是利用vant制作一个基础的Radio单选框组件；第二节是实现一个变异的单选框组件-按钮式单选框组件，通常来说这个单选框组件是经常会用到的，应用比较广的一个组件。这节课我们从基础应用开始吧。

准备工作：

1. 创建一个页面: Radio.vue
2. 在router.js里配置Radio页面的路由

{
 path: '/radio',
 name: 'radio',
 component: () => import('./views/Radio.vue')
 }

1. 在index.vue里添加一项

<a href="javascript:void(0)" @click="$router.push('/radio')">
 <van-col span="6" class="marb20">
 <van-icon name="certificate" />
 <div>Radio 单选框</div>
 </van-col>
</a>

至今为止呢，我们的首页显示的样式子是这样滴?不知道不觉间我们已经学完了15个组件了！哇噢，为自己欢呼一下吧！如果想看更多的内容，欢迎关注我，每天都有更新哈。

代码演示Radioa单选框：

基本方法：

<van-radio-group v-model="radio">
 <van-radio name="1">苹果</van-radio>
 <van-radio name="2">香蕉</van-radio>
</van-radio-group>
data() {
 return {
 radio: '1',
 }
},

与Cell组件连用：

<van-radio-group v-model="radio" @change="onChange">
 <van-cell-group>
 <van-cell title="苹果">
 <van-radio name="1" />
 </van-cell>
 </van-cell-group>
 <van-cell-group>
 <van-cell title="香蕉">
 <van-radio name="2" />
 </van-cell>
 </van-cell-group>
</van-radio-group>

<van-cell>里加入van-radio组件，会自动放在组件的右侧。我们在变化选项时会触发change事件，这个事件返回值是选中项的name

onChange(name) {
 console.log(name)
},

可以在控制台输出name:

这就是我们经常用的单选框。官网上有说可以设置选项的颜色值，用checked-color="#000"，但是本人试了一下，发现并无变化。不知道什么原因，如果有小伙伴知道的，可以告知一下，谢谢。

下节课我们将实现另一个单选组件--单选按钮组件。下节课不见不散噢！

今天就到这里啦。休息休息一会儿吧?明天继续加油噢！加油