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去实现

<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，导致多写了几行代码。