vue给伪类动态添加样式

2022-02-18  本文已影响0人  努力study代码的小哪吒

需求背景

对于我们动态添加样式,可以在: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>

上一篇 下一篇

猜你喜欢

热点阅读