vue动态样式绑定改变伪元素等特殊样式(css var函数)

改变样式是我们实际开发中最常做的事情。
诸如在css中，我们添加鼠标滑入滑出效果添加不同的样式。
诸如在js中，我们根据某个条件，或者触发某个方法，去动态改变某个样式。
那么，在vue中，我们更能很轻松的达到这点。
看下常见的几种情景：

• 情景一：我们需要根据某个变量是否存在（触发），去动态添加样式
  描述：当我们点击按钮触发了某个条件，我们需要给对应的元素添加激活效果

这里我们通过三目判断某个触发条件的变量是否为true以此来添加不同的样式（当然也可以动态绑定class，来添加不同的类名，实现不同的效果）

• 情景二：我们封装组件，希望外界可以自定义传入实现不同的样式
  描述：通过props定义样式值，外界可自定义传入改变，不传入则使用默认值

上面的组件，我们再使用的时候，当我们不传入值的时候，也能正常显示默认值达到默认效果，我们也可以传入对应的值达到不同的复用效果

• 情景三：动态绑定实现改变伪元素等样式
  描述：以上样式都是我们最普通的样式，但是我们如何通过绑定样式改变伪元素（::before、::after）、激活、滑入等复杂的样式呢？看下下面的示例吧：

上述示例中，我们在对应的样式处，通过 var(--自定义命名) 的方式定义变量（括号里面是两条杠，别写错了），在vue的标签处通过 '--var中定义的命名': props中对应的样式变量 就可以改变对应的样式。
当然了，功能远不止于此，我们在使用一些公共ui库(比如element ui)时，它的一些标签都是自动生成的，比如我们只引入了 el-dropdown 下拉菜单，但是我们通过在控制台查阅发现内部可能嵌套生成很多标签，这时我们想改变内部嵌套的子元素的样式，就没办法直接给父元素绑定诸如宽、高的方式，我们可以找到对应的类名样式，通过 var的方式(参考如下)

.VideoSurveillance .listArea .videoList .el-tree .el-tree-node__content {
    height: var(--itemGap);
    line-height: var(--itemGap);
    position: relative;
}

当然了，考虑用法前可以参考下兼容性

在这里插入图片描述

好了，如上就是vue中动态改变特殊样式时的技巧。
如有问题，请指出，接收批评。