vue2组件系列第二十节:按钮式单选组件

按钮式单选组件很常见，这样比较直观，方便选择。

准备工作：

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

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

1. 在index.vue里添加一项

<a href="javascript:void(0)" @click="$router.push('/chooseOne')">
 <van-col span="6" class="marb20">
 <van-icon name="pending-deliver" />
 <div>按钮式单选</div>
 </van-col>
</a>

至今为止呢，我们的首页显示的样式子是这样滴?不知道不觉间我们已经学完了16个组件了！哇噢，为自己欢呼一下吧！如果想看更多的内容，欢迎关注我，每天都有更新哈。如果想与更多志同道合的小伙伴交流前端，也欢迎关注我的微?:duzhan2018

代码演示ChooseOne按钮式单选组件：

需求介绍：

一系列电影类型的灰色铵钮，选择你喜欢的类型，选择后按钮会变成绿色。

首先需要将基础部分展示出来：

<van-row>
 <van-col span="6" style="margin: 10px auto;" v-for="(item,index) in movieType">
 <van-button type="normal">
 {{ item }}
 </van-button>
 </van-col>
</van-row>
data() {
 return {
 checkedId: '',
 movieType: ['悲剧', '爱情', '动作', '枪战', '犯罪', '科幻']
 }
},

当然，我们现在点击的时候，按钮并不变色。如何让按钮变成绿色呢？我们看下现在的button的type是normal，绿色的按钮则type是primary。思路是：当我们点击的checkedId和当前的index值如果是相等的，则这个type变为primary。首先肯定有个点击事件的，会将index传入，将index赋值给checkedId，则checkedId即为当前点击的index值：

<van-button type="normal" @click="onClick(index)">
onClick(index) {
 this.checkedId = index
},

这时候我们就需要在type上下手了?

<van-button 
 :type="checkedId === index ? 'primary' : 'normal'"
 @click="onClick(index)"
>
 {{ item }}
</van-button>

应用的是三元运算符，如果checkedId === index，type值为primary，其它不相等的，则type值为normal。则我们选择“动作”时，如下图所示：

以上就是单选按钮式组件喽?有一个小技巧要记住噢。如果等号右侧既有变量又有字符串时，等号左侧的属性需要是绑定式属性噢！

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

上一节内容：vue2组件系列第十九节：Radio 单选框（基础应用）