未选择的按钮class为detail-btn
,选择后class为detail-btn detail-selected
html:
<div class="detail-btn" @click="chooseOrder($event)"></div>
css:
.detail-btn{
.43rem;
height: .45rem;
background: url(../images/list-no.png) no-repeat;
background-size: 98%;
}
.detail-selected{
background: url(../images/list-select.png) no-repeat;
background-size: 98%;
}
js:
chooseOrder:function(e){
if (e.target.className.indexOf("detail-selected") == -1) {
e.target.className = "detail-btn detail-selected"; //切换按钮样式
//写逻辑
} else {
e.target.className = "detail-btn";//切换按钮样式
//写逻辑
}
},