vue 中 style 标签使用 data 中数据

最新推荐文章于 2024-10-01 18:51:18 发布

程序员白羊

最新推荐文章于 2024-10-01 18:51:18 发布

阅读量4.5k

点赞数 5

文章标签： vue javascript js

本文链接：https://blog.csdn.net/qq_41495525/article/details/108711208

版权

简单演示

html

<div class="header" ref="mycolor" @click="func">
    <div class="header-info"></div>
</div>


style

<style>

.header {
    --bcColor: #ffffff;
}
/*在子元素中使用该变量*/
.header .header-info {
    background-color :var(--bcColor);
}
</style>

js
<script>
    methods:{
        func () {
            // 动态修改样式
            this.$refs.mycolor.style.setProperty("--bcColor",'white');
        }
    }
</script>