vue实现按钮多选

需求是这样：

 

首先考虑使用elementui中的组建实现，但是有时候会忽略组建。实现方式两种：

1.直接使用element实现

let weekTimeData: [
        '星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日'
      ]

<el-checkbox-group v-model="form.setting_week" class="mr12">
          <el-checkbox-button v-for="(item,index) in weekTimeData" :key="index" :label="item">{{ item }}</el-checkbox-button>
 </el-checkbox-group>

2.使用原生js去实现

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

<span           v-for="(item,index) in weekTimeData"           :key="index"           :class="{'active':selected.indexOf(item)!=-1}"           @click="active(index,item)"  > {{ item }} </span>   selected：[]   // 方法 active(index, item) {       if (this.selected.indexOf(item) !== -1) {          this.selected.splice(this.selected.indexOf(item), 1); // 取消     } else {       this.selected.push(item);// 选中添加到数组里     }   this.form.setting_week = this.selected;   },   //style需要写样式

 

比较推荐使用elemnt ui的方法，我在开发的时候，忘记了使用element ui，导致多写了几行代码。