通过:style实现css动态赋值颜色

示例一：

1、先动态给一个颜色变量


2、 然后引入颜色变量

<style lang="scss">
.mroeMeun {
  .el-submenu__title {
  // 引入颜色变量
    color: #{"var(--title_color)"} !important;
    i {
      color: #{"var(--title_color)"} !important;
    }
  }
}
</style>

示例二：

1、使用:style 绑定接口返回值动态改变字体颜色

<template>
    <div class="new-energy-product">
        <div class="items">
            <div class="item" v-for="e of result.data">
                <h3 class="border" style="width: 60px">{{ e.name }}</h3>
                <div class="border">
                	<!-- 使用:style 动态改变字体颜色 -->
                    <h4 :style="{
                    'color': (e.timeOutCasteNum>0 || e.littleAbnomalTaskNum>0) ? 'red' : 'green'
                    }">小物供给</h4>
                    <span>正在执行&nbsp;<span>{{e.littleExcutingTaskNum ? e.littleExcutingTaskNum  : ''}}&nbsp;&nbsp;&nbsp;&nbsp;</span></span>
                    <span>待投棚数&nbsp;<span>{{e.watingCastingNum ? e.watingCastingNum : ''}}&nbsp;&nbsp;&nbsp;&nbsp;</span></span>
                    <span>投棚超时&nbsp;<span :style="{
                    'color': (e.timeOutCasteNum && e.timeOutCasteNum > 0) ? 'red' : 'green'
                    }">{{e.abnomalTaskNum ? e.abnomalTaskNum : ''}}&nbsp;&nbsp;&nbsp;&nbsp;</span></span>
                    <span>异常任务&nbsp;<span :style="{
                    'color': (e.littleAbnomalTaskNum > 0) ? 'red' : 'green'
                    }">{{e.littleAbnomalTaskNum ? e.littleAbnomalTaskNum : ''}}</span></span>
                </div>
                
            </div>
        </div>
    </div>
</template>

//绑定数据示例：
result:{
                    "code": "0",
                    "data": [
                        {
                            "name": "T1",
                            "littleExcutingTaskNum": 30,
                            "watingCastingNum": 15,
                            "timeOutCasteNum": 0,
                            "littleAbnomalTaskNum": 0,
                            "bigSuppltyExcutingTaskNum": 4,
                            "materialShortageNum": 4,
                            "bigSuppltyAbnomalTaskNum": 0,
                            "bigEmptyExcutingTaskNum": 30,
                            "bigEmptyAbnomalTaskNum": 6,
                            "twiceSingleExcutingTaskNum": 54,
                            "twiceSinglePodLeakNum": 8,
                            "twiceSingleAbnomalTaskNum": 0,
                            "twiceSuppltyExcutingTaskNum": 30,
                            "twiceSuppltyPodLeakNum": 0,
                            "twiceSuppltyAbnomalTaskNum": 0,
                            "twiceEmptyExcutingTaskNum": 89,
                            "twiceEmptyPodLeakNum": 8,
                            "twiceEmptyAbnomalTaskNum": 7
                        }
                    ]
                }

效果：