美文网首页
vue给伪类动态添加样式

vue给伪类动态添加样式

作者: 努力study代码的小哪吒 | 来源:发表于2022-02-18 10:59 被阅读0次

需求背景

对于我们动态添加样式,可以在:style里面,但是伪类动态添加就不行了,我就在想能不能在data中定义,然后在伪类中使用

代码介绍

我是在一个组件中使用的,小伙伴只需要看伪类动态的样式即可

上代码

<template>
           <div class="camera_icon" :style="{background: bgColor, '--color': addColor }" >
</template>
<script>
        data () {
          return {
             bgColor: '#F1F1F1',
             addColor:  '#DADADA'
           }
        }
</script>
<style lang="stylus" scoped>
    .camera_icon
       &:before
         content ''
         position absolute
         background var(--color)
       &:after
        content ''
        position absolute
        background var(--color)
</style>

相关文章

  • vue给伪类动态添加样式

    需求背景 对于我们动态添加样式,可以在:style里面,但是伪类动态添加就不行了,我就在想能不能在data中定义,...

  • 伪类与伪元素

    伪类 伪类用于当已有元素处于的某个状态时,为其添加对应的样式,这个状态是根据用户行为而动态变化 伪元素 伪元素用于...

  • 伪类及伪元素

    伪类 伪类用于当已有元素处于某个状态时,为其添加对应的样式,这个状态是根据用户行为而动态变化 LVHA顺序:lin...

  • 伪类与伪元素

    伪类 伪类用于当已有元素处于的某个状态时,为其添加对应的样式,这个状态时根据用户行为而动态变化的。 1. a 元素...

  • 伪类与伪元素详解

    伪类: 伪类用于当已有元素处于的某个状态时,为其添加对应的样式,这个状态是根据用户行为而动态变化的.比如说,当用户...

  • 清除浮动方法

    2.伪类 3.添加空元素并添加样式属性

  • CSS-》伪类和伪元素

    伪类:为当前已有的元素的某个状态添加样式,状态会随用户行为动态变化;修饰的元素还在文档树当中; 伪元素:创建一些不...

  • CSS伪类与伪元素简单了解

    CSS 伪类 CSS 伪类用于向某些选择器添加特殊的效果。 :active | 向被激活的元素添加样式。 :foc...

  • 11.CSS选择器

    选择器 image.png 伪类&伪元素伪类:active向被激活的元素添加样式,a:active 必须被置于 a...

  • 需求:制作盒子的背景模糊效果

    通过CSS给父盒子添加一个伪类 注意点一:伪类的默认宽度达不到父盒子一样,所以我们需要动态计算,增大伪类的宽高,同...

网友评论

      本文标题:vue给伪类动态添加样式

      本文链接:https://www.haomeiwen.com/subject/exzelrtx.html