vue中input多选_vue中单选框与多选框的实现与美化

我们在做一些页面时，可能会用到很多的单选框和复选框，但是原生的radio和checkbox前面的原型图标或方框样式不尽人意。于是，决定自己来实现单选框和复选框。我用的是vue，所以就用vue的方式实现单选和复选框。

下面来看一下单选框的实现：

template

单选框

单选框

style

.selfRadio{cursor:pointer;.selfRadioImgBox img{

width:18px;height:18px;

}.selfRadioText{margin-left:10px;

}}

data

radioVal:0,

methods

clickRadio(val){if(this.radioVal==val){

this.radioVal=0;}else{this.radioVal=val;}}

单选框的实现，主体思想是，我们自己选两张图片，用v-show来控制其显示或隐藏，这样达到与单选框一样的效果，而且选择框可以根据自己的意愿来换。

下面来看一下多选框的实现：

data：

checkBoxArr:[

{

text:'多选框1',

selectStatus:0

},

{

text:'多选框2',

selectStatus:0

}

]

template

{{ item.text }}

style

.selfCheckBox{cursor:pointer;.selfCkeckImgBox img{

width:30px;height:30px;

}.checkBoxText{margin-left:10px;

}}

methods

clickCheckBox(index){if(this.checkBoxArr[index].selectStatus==1){this.checkBoxArr[index].selectStatus=0;

}else{this.checkBoxArr[index].selectStatus=1}

}

多选框，控制选择框的样式切换，和单选框是一样的原理，但是单选框只能选一个，而多选框可以选多个，所以在实现多选框时，我们将每个多选框里面都加了个selectStatus属性，用来表示，每个多选框的选中状态。

补充一条：选中样式图片与未选中样式图片，可以自己找，可以去ali图库里下载，想用啥用啥。

下面是将bootstrap与单复选框结合起来的使用方式，响应式，美化选择框