vue项目点击图片切换

最新推荐文章于 2024-07-10 17:34:18 发布

碉堡飞哥

最新推荐文章于 2024-07-10 17:34:18 发布

阅读量7.8k

点赞数

分类专栏：前端 vue

前端同时被 2 个专栏收录

183 篇文章 3 订阅

订阅专栏

vue

15 篇文章 0 订阅

订阅专栏

未选择的按钮class为detail-btn，选择后class为detail-btn detail-selected （注意图片变换下）

html:

<div class="detail-btn" @click="chooseOrder($event)"></div>


css:

.detail-btn{
    width: .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";//切换按钮样式
                           //写逻辑
                        }
                 },