vue 通过类名绑定来自动切换/(动态)换图

最新推荐文章于 2024-05-20 13:53:01 发布

IT博客技术分享

最新推荐文章于 2024-05-20 13:53:01 发布

阅读量885

点赞数

分类专栏： VUE相关问题汇总文章标签： vue 通过类名绑定来自动切换/(动态)换图

本文链接：https://blog.csdn.net/qq_41646249/article/details/97247211

版权

VUE相关问题汇总专栏收录该内容

53 篇文章 4 订阅

订阅专栏

先上效果图：

从图上可以看出是2张车头朝向不一样的小车；

主要通过：类名绑定

:class="{'bg1':item.flag == true,'bg2':item.flag == false }"

判断条件是: item.flag == true / item.flag == false;

贴一下标签代码：

                <!-- 小车的位置 -->
                <div class="positions">
                    <div id="act_point"
                        v-if="lines.line.lineId === item.lineId"
                        v-for="(item,index) in positions" :key="index"
                        :style="{left: item.left + 'px', bottom: item.bottom + 'px'}"
                        :class="{'bg1':item.flag == true,'bg2':item.flag == false }"
                        :title=" '线路Id：' + item.lineId + ',列车编号：' + item.trainId + ',车站Id：' + item.stationBId"></div>
                </div>

贴一下css主要代码：

/* 小车 */
.positions {
    width: 100%;
    position: relative;
    top: -120px;
}
.positions #actpoint {
    position: absolute;
    bottom: 20px;
    left: -6px;
    width: 50px;
    height: 22px;
    /* background: url('/static/img/tain1.png') no-repeat; */
    cursor: pointer;
}

.bg1{
    position: absolute;
    bottom: 20px;
    left: -6px;
    width: 50px;
    height: 22px;
    background: url('/static/img/tain1.png') no-repeat;
    cursor: pointer;
}
.bg2{
    position: absolute;
    bottom: 20px;
    left: -6px;
    width: 50px;
    height: 22px;
    background: url('/static/img/tain.png') no-repeat;
    cursor: pointer;
}

本案例的全部代码，我已上传 github，如有需要请去github done：

最后为了方便大家的沟通与交流请加QQ群： 625787746

请进QQ群交流：【IT博客技术分享群①】：https://jq.qq.com/?_wv=1027&k=DceI0140