vue实现单选多选答题

vue实现单选多选

一、明确需求
1、先明确数据有唯一标识区分
2、是否有选中的效果，如果有需要在每个数据里加一个标识来区分
实现下图效果

上代码
this.checkNow是选中得list,item是当前选中的数据对象，voteList是获取到选项的所有数据，votingForm 标识是否单选，isChecked 是否选中用来控制显示状态

// 多选 if(this.checkNow.includes(item)){ this.minusList(item) } else { this.addList(item) } // 添加选中数据方法 addList(list){ this.checkNow = this.checkNow.concat(list) this.voteList.forEach(item =>{ if(item.id === list.id){ item.isChecked = true } if(this.votingForm == '单选'){ if(item.id === list.id){ item.isChecked = true }else{ item.isChecked = false } } }) } // 减去选中 minusList(list){ this.checkNow = this.checkNow.filter(item => item != list) this.voteList.forEach(item =>{ if(item.id === list.id){ item.isChecked = false } }) } 

单选，checkNow里只会有一条数据

if(this.votingForm == '单选'){ if(this.checkNow && this.checkNow.length > 0 ){ if(this.checkNow[0] != item){ this.checkNow = [] this.checkNow[0] = item this.voteList.forEach(ele =>{ if(ele.id === item.id){ ele.isChecked = true } else { ele.isChecked = false } }) } else { this.minusList(item) } } else { this.addList(item) } } 

就酱~

版权声明：

本文来源网络，所有图片文章版权属于原作者，如有侵权，联系删除。

本文网址：https://www.mushiming.com/mjsbk/599.html