老样子,先放效果图
击切换单选框
html部分
<p>
<span
:class="!isSelected ? 'background-blue' : 'background-white'"
@click="changeSelected(1)">夜间</span>
<span
:class="isSelected ? 'background-blue' : 'background-white'"
@click="changeSelected(2)">昼间</span>
</p>
js部分
data() {
return {
isSelected: true,
}
},
changeSelected(index) {
this.isSelected = index == 1 ? false : true // 切换选中的按钮
}
CSS部分
div + p{
display: flex;
justify-content: flex-end;
padding-right: 10px;
}
div + p span{
padding-left: 10px;
}
p span::before{
content:'';
margin-right:6px;
padding:0 10px; // 把格子撑开
border: 1px solid #808080;
}
.background-white::before {
background:#fff;
}
.background-blue::before {
background:#14a9ff;
}