vue中怎么修改复选框的状态vue2组件系列第十九节

导读项目开发过程中缺不了form表单，也缺不了radio。Radio单选框组件将分成两节内容，第一节是利用vant制作一个基础的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" > <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"，但是本人试了一下，发现并无变化。不知道什么原因，如果有小伙伴知道的，可以告知一下，谢谢。

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

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