vue中动态修改组件样式
今天遇到了个难题,在次记录一下。
一般我们vue中动态修改一个组件的样式会用 :class :style等方法。
今天我在修改一个组件样式的时候发现覆盖不了原有样式
于是我在style标签中用/deep/修改了一下,发现成功了,但是我必须要动态修改,那么怎么在css中使用vue变量呢?
css 变量var()
CSS中原生的变量定义语法是:–,变量使用语法是:var(–),其中*表示我们的变量名称。关于命名这个东西,各种语言都有些显示,例如CSS选择器不能是数字开头,JS中的变量是不能直接数值的,但是,在CSS变量中,这些限制通通没有,例如:
:root {
--1: #369;
}
body {
background-color: var(--1);
}
在vue中应用
首先在需要动态修改css的父元素或本身添加:style 设置css变量名,并绑定vue一个动态变量
然后在css中使用
到此为止 css中使用变量动态更新完成
还没有评论,来说两句吧...