vue组件利用css var(--变量)实现动态修改伪类属性（::before、::after）

最新推荐文章于 2025-04-22 23:50:29 发布

月下脆竹書閣

最新推荐文章于 2025-04-22 23:50:29 发布

阅读量2.5k

点赞数 1

分类专栏： CSS 文章标签： css vue.js 前端

CSS 专栏收录该内容

9 篇文章

订阅专栏

本文介绍了一种使用Vue.js动态修改伪元素属性的方法，通过条件判断实现不同状态下的视觉反馈效果。具体而言，该方法根据用户的登录状态改变绿色或灰色圆点的显示，从而直观地指示用户的登录状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

动态修改伪类属性

需求:用户已登录为绿色圆点，未登录为灰色圆点

在这里插入图片描述

<div 
   class="tag-horizontal" 
   :style="{'--bgColor':item?.user?'#1fdb7d':'#a9abb9'}"
 >
 </div>

.tag-horizontal {
    &::before{
        content: "";       
        position: absolute;
        left: 0.4rem;
        top: 0.45rem;
        width: 0.7rem;
        height: 0.7rem;
        background-color: var(--bgColor);
        border-radius: 50%;
        box-shadow: inset 2px 0 2px #3e6d81;       
    }
}