vue 标签使用style传参 style获取参数

最新推荐文章于 2024-05-30 11:27:58 发布

巨蟹座守护骑士

最新推荐文章于 2024-05-30 11:27:58 发布

阅读量286

点赞数 6

分类专栏： css vue2 HTML 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_70563937/article/details/138969675

版权

vue2 同时被 3 个专栏收录

30 篇文章 0 订阅

订阅专栏

HTML

8 篇文章 0 订阅

订阅专栏

css

7 篇文章 0 订阅

订阅专栏

标签绑定参数

<div class="timeline" :data-content="less_day" :style="{ '--bottom': less_day2 }"
       ref="branch_money" style="width: 100%; height: 350px">
</div>

style中获取

// 时间线
.timeline {
    position: relative;

    &::before {
        content: attr(data-content); // data-变量
        text-align: right;
        position: absolute;
        bottom: var(--bottom); //当前时间进度就是高度,通过style变量获取 定义以--开头
        left: 0;
        width: 100%;
        height: 22px;
        border-bottom: 2px solid #ff0000;
        color: red;
        transform: translateY(-30px);
        z-index: 1;
    }
}

效果

红色的时间线根据每天的时间进行高度变化