前一段时间,做了一个项目,要求两个按钮,只能选择其中的一个,且按钮再次点击的时候,要取消掉之前选中的状态,下面是具体的代码
*{
padding: 0;
margin: 0;
}
.btnBox{
margin: 100px 200px;
}
.btn{
padding: 10px;
width: 80px;
height: 40px;
background: #f1f5bb;
border-radius: 5px;
margin-left: 10px;
border: 1px solid #CCCCCC;
}
.isActive{
background: #00A8E6;
}
</style>
</head>
<body>
<div class="btnBox">
<button class="btn btn1" @click="isChoose(1)" :class="{isActive:isChecked==1}">是</button>
<button class="btn btn2" @click="isChoose(-1)" :class="{isActive:isChecked==-1}">否</button>
</div>
var btnBOX=new Vue({
el:'.btnBox',
data:{
isChecked:0,
},
methods:{
isChoose(index){
if(index==1){
if(this.isChecked==1){
//改变原来的状态,就是为选中的状态,当点击的时候就取消掉选中的状态
this.isChecked=0;
}else {
this.isChecked=1;
}
}else {
if(this.isChecked==-1){
this.isChecked=0;
}else {
this.isChecked=-1;
}
}
}
},
computed:{
}
})