通过条件判断使用不同的css样式

1.目的

通过动态参数的值来决定使用什么样式，即通过JavaScript中的判断来决定css中使用哪种样式。代码：vue2

2.简单举例

实现前

实现后

3.实现

created() {
        console.log(this.disabled)
        if(this.disabled){
            console.log(11111)
            var root = document.documentElement;
            root.style.setProperty('--disabled-color', '#999');
            root.style.setProperty('--disabled-opacity', '0.6');
            root.style.setProperty('--disabled-background-color', '#f5f5f5');
        }else {
            console.log(222222)
        }
    },

在created函数中通过判断传入的disabled的值来判断使用哪种样式，因为created钩子函数在页面渲染前执行，所以在此处实现
这里只做简单演示，如果为true，修改为置灰样式

css代码如下

:root {
    --disabled-color: #db1414;
    --disabled-opacity: 0.6;
    --disabled-background-color: #ece2e2;
}

.el-collapse-item__arrow.el-icon-arrow-right:before{
    background-color: var(--disabled-background-color);
    color: var(--disabled-color);
    opacity: var(--disabled-opacity);
}

将.el-collapse-item__arrow.el-icon-arrow-right:before{换成自己的class名称即可，其他代码不变