普通html和vue单选框的样式,vue2实现自定义样式radio单选框
先上效果
主編已回復:
{{item.label}}
js:
data() {
return {
radio: '1',
radios:[
{
label: '是',
value:'1',
isChecked: true,
},
{
label: '否',
value:'2',
isChecked: false,
},
{
label: '全部',
value:'3',
isChecked: false,
},
]
}
},
methods: {
check(index) {
// 先取消所有選中項
this.radios.forEach((item) => {
item.isChecked = false;
});
//再設置當前點擊項選中
this.radio = this.radios[index].value;
// 設置值，以供傳遞
this.radios[index].isChecked = true;
console.log(this.radio);
}
}
樣式：
.radio-box{
display: inline-block;
position: relative;
height: 25px;
line-height: 25px;
margin-right: 5px;
}
.radio {
display: inline-block;
width: 25px;
height: 25px;
vertical-align: middle;
cursor: pointer;
background-image: url(../../../common/images/radio.png);
background-repeat: no-repeat;
background-position: 0 0;
}
.input-radio {
display: inline-block;
position: absolute;
opacity: 0;
width: 25px;
height: 25px;
cursor: pointer;
left: 0px;
outline: none;
-webkit-appearance: none;
}
.on {
background-position: -25px 0;
}
總結
以上是生活随笔為你收集整理的普通html和vue单选框的样式,vue2实现自定义样式radio单选框的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Python MySQL更新表
- 下一篇： oracle河南城建学院实验报告,数据处