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

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

准备工作：

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

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

在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个组件了！哇噢，为自己欢呼一下吧！如果想看更多的内容，欢迎关注我，每天都有更新哈。

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

代码演示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', } },

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

与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:

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