vue中动态style(如何动态修改伪元素样式)

最新推荐文章于 2024-05-15 10:50:59 发布

爱上星星的鲸鱼

最新推荐文章于 2024-05-15 10:50:59 发布

阅读量1.5w

点赞数 14

分类专栏： vue 文章标签： css vue

本文链接：https://blog.csdn.net/qq_44827891/article/details/106413564

版权

vue 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

vue中如何动态修改伪元素样式

vue项目中我们可以通过行内样式进行动态修改样式,大家都会就举栗子了

如何动态修改伪元素样式?

1.css中如何用变量

声明css变量的时候，变量名前面要加两根连词线（–）。
变量名大小写敏感，–header-color和–Header-Color是两个不同变量。
var()函数用于读取变量。
var()函数还可以使用第二个参数，表示变量的默认值。如果该变量不存在，就会使用这个默认值。
第二个参数不处理内部的逗号或空格，都视作参数的一部分。

<style>
body {
  --highlight-color: green;
}
.container {
  --highlight-color: red;
}
a {
  color: var( --highlight-color );
}
</style>
<body>
  <div class="container">
    <a href="">Link</a>
  </div>
</body>

2.根据css中使用变量的方法,我们可以结合vue中动态行内样式进行伪元素动态属性设置

<template>
    <div class="test">
        <span :style="spanStyle" class="span1">hello world</span>
        <br>
        <span :style="{'--width': widthVar}" class="span2">hello earth</span>
    </div>
</template>
<script>
export default {
    data() {
        return {
            spanStyle: {
                "--color": "red"
            },
            widthVar: "100px"
        };
    }
}
</script>
<style scoped>
    .span1 {
        color: var(--color);
    }
    .span2 {
        text-align: center;
        position: relative;
        width: var(--width);
    }
    .span2::after {
        content: '';
        display: block;
        position: absolute;
        left: 100%; 
        width: var(--width);
        height: var(--width);
        border-radius: 50%;
        border: 2px solid black;      
    }
</style>

爱上星星的鲸鱼

关注

14
点赞
踩
26

收藏

觉得还不错? 一键收藏
3
评论
vue中动态style(如何动态修改伪元素样式)

vue中如何动态修改伪元素样式vue项目中我们可以通过行内样式进行动态修改样式,大家都会就举栗子了如何动态修改伪元素样式?1.css中如何用变量声明css变量的时候，变量名前面要加两根连词线（–）。变量名大小写敏感，–header-color和–Header-Color是两个不同变量。var()函数用于读取变量。var()函数还可以使用第二个参数，表示变量的默认值。如果该变量不存在，就会使用这个默认值。第二个参数不处理内部的逗号或空格，都视作参数的一部分。<style>b
复制链接

扫一扫