vue實現按鈕多選
阿新 • • 發佈:2022-12-03
需求是這樣:
首先考慮使用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,導致多寫了幾行程式碼。