专栏首页工作笔记精华怎么在vue的style标签里面使用变量?

怎么在vue的style标签里面使用变量?

兄弟,我刚好碰到这个问题。代码里需要不断变更CSS里样式的值(遍历+大量),并通过JS进行设置。基本上要求应该是和你差不多的。 以上所有方法我基本都试过,用了一个白天加半个晚上,现在是凌晨三点。

我说一下我的方法,我自己已验证有效: 1、演示HTML主体结构

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

2、首先作用区域范围内设置“CSS变量”

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

3、在JS中通过setProperty()方法修改“--bcColor”的值,从而间接改变对应子元素的(background-color)背景颜色

<script>
    methods:{
        func () {
            this.$refs.mycolor.style.setProperty("--bcColor",'white');
        }   
    }
</script>

PS:至少在我还清醒之前,注册上来回答一下,希望能帮到你。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • js怎么动态加载js文件(JavaScript性能优化篇)转

    下面介绍一种JS代码优化的一个小技巧,通过动态加载引入js外部文件来提高网页加载速度

    stys35
  • javascript插件的几种写法

    var Helloword = function(objId){ var _get_dom = function(Id){ re...

    stys35
  • 使用JDK开发WebService 转

      1、定义一个interface,使用@WebService注解标注接口,使用@WebMethod注解标注接口中定义的所有方法,如下所示:

    stys35
  • 选择软件开发方法时应注意的事项

    在决定在下一个项目中使用哪种类型的软件开发方法时,企业需要记住一些事情。需要评估的标准都是强制性的。认真对待这个问题将降低风险,并将不良后果的可能性降到最低。

    木子宇
  • 研究团队打破了高温、电磁场等技术限制,在空气中创造出等离子环 | 黑科技

    镁客网
  • JS魔法堂:获取当前脚本文件的绝对路径

    一、前言                           当写模块加载器时,获取当前脚本文件的绝对路径作为基础路径是必不可少的一步,下面我们一起来探讨一下这...

    ^_^肥仔John
  • 初识SignalR~仿QQ即时聊天(群发,单发)(Web,WPF等Demo演示)【中】

    第二个阶段: QQ聊天案例,先讲一种常规的方法,下面会讲一种简单方法 先看看gif效果图把 ? 定义一个BaseHub类,里面用 qqModeList来...

    逸鹏
  • 看图快速学变频器

    在嵌入式开发中,经常会涉及到对电机的控制,目前交流电动机的变频控制应用非常广泛,所以我们来简单看图介绍下变频器 (variable-frequency driv...

    用户1605515
  • JQuery

    但凡有两个函数完成的功能是相反的,比如一个显示一个隐藏,那么肯定会有第三个函数的效果是前两个函数的和。也就是说两个单词是反义词,那么肯定会有第三个单词,而且都和...

    小闫同学啊
  • 手机购年货需警惕吸费应用,病毒木马多伪装成电商软件

    马年春节即将到来,年货市场提前火爆。与以往不同的是,今年随着智能手机的普及和手机购物方式的流行,手机买年货已经成为时下家庭的首选。然而,手机网购...

    安恒信息

扫码关注云+社区

领取腾讯云代金券