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中使用变量动态更新完成