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

多选式按钮和单选式按钮有些类似，只不过是可以多选。在项目里我们也是经常遇到的。

准备工作：

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

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

1. 在index.vue里添加一项

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

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

代码演示多选式按钮：

我们延用单先式按钮的布局：

<van-row>
 <van-col span="6" style="margin: 10px auto;" v-for="(item,index) in movieType">
 <van-button 
 :type="flag[index] ? 'primary' : 'normal'"
 @click="onClick(index)"
 >
 {{ item }}
 </van-button>
 </van-col>
</van-row>

多选的话，肯定是一个数组，所以选重的checkedId会是一个数组，会将选中的index值push进去。还有一个flag值，代表着每个item的true或者false，也是一个数组。在这里，我们引入一个lodash库(不熟悉的小伙伴可以打开研究研究哈)，方便我们去遍历以及删除等操作。

import _ from 'lodash'
export default {
 data() {
 return {
 checkedId: [],
 flag: [],
 movieType: ['悲剧', '爱情', '动作', '枪战', '犯罪', '科幻']
 }
 },
 methods: {
 onClick(index) {
 if(this.checkedId.indexOf(index) === -1) { //checkedId是否有index
 this.checkedId.push(index)
 this.$set(this.flag, index, true) //改变数组的值的方法
 } else {
 this.checkedId = _.remove(this.checkedId, (idx) => {
 return idx !== index //返回删除后的数组
 })
 this.$set(this.flag, index, false)
 }
},

这里需要特别说明的一点是，flag是一个数组，我们在改变其值时不能使用赋值的方式，需要用$set方法，否则效果会出不来。我再重温一下这个知识点，当我们在JS部分改变数组的值或者数组的长度时，都需要用$set方法。这是一个坑，经常会有小伙伴犯错哈。语法格式为：

this.$set(array, index, value)

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