vue中动态修改组件样式

客官°小女子只卖身不卖艺 2023-02-23 12:28 114阅读 0赞

今天遇到了个难题,在次记录一下。
一般我们vue中动态修改一个组件的样式会用 :class :style等方法。
今天我在修改一个组件样式的时候发现覆盖不了原有样式
于是我在style标签中用/deep/修改了一下,发现成功了,但是我必须要动态修改,那么怎么在css中使用vue变量呢?

css 变量var()

CSS中原生的变量定义语法是:–,变量使用语法是:var(–),其中*表示我们的变量名称。关于命名这个东西,各种语言都有些显示,例如CSS选择器不能是数字开头,JS中的变量是不能直接数值的,但是,在CSS变量中,这些限制通通没有,例如:

  1. :root {
  2. --1: #369;
  3. }
  4. body {
  5. background-color: var(--1);
  6. }

在vue中应用

首先在需要动态修改css的父元素或本身添加:style 设置css变量名,并绑定vue一个动态变量
在这里插入图片描述
然后在css中使用
在这里插入图片描述
到此为止 css中使用变量动态更新完成

发表评论

表情:
评论列表 (有 0 条评论,114人围观)

还没有评论,来说两句吧...

相关阅读