前端--computed改变v-for渲染的div bgc

weixin_44320857

已于 2024-01-09 10:05:21 修改

阅读量408

点赞数 9

文章标签：前端

于 2024-01-09 10:02:37 首次发布

本文链接：https://blog.csdn.net/weixin_44320857/article/details/135472769

版权

文章描述了一个HTML元素如何通过JavaScript的computed属性，根据`kpi_seq`值映射到不同的CSS背景颜色。CSS中定义了对应的颜色规则。

摘要由CSDN通过智能技术生成

html
这段代码有一个不重复的id 可以以此区分颜色

<div class="left pleftr" style="width: 100%;background-color: #4bacc6;" :class="getbgc(item)">
                                <div class="leftop font12 flex" style="display: flex;justify-content:center;">
                                    <div style="width: 70%;">[[item.kpi_name]]%</div>
                                    <div style="width: 30%;text-align: right;">
                                        <div>Rate</div>
                                        <div>[[item.current_kpi_val]]%</div>
                                    </div>
                                </div>
                            </div>

computed

computed:{
                getbgc(){
                    return function(val) {
                        if(val.kpi_seq == '1') {
                            return 'color1'
                        }
                        if(val.kpi_seq == 2) {
                            return 'color2'
                        }
                        if(val.kpi_seq == 3) {
                            return 'color3'
                        }
                        if(val.kpi_seq == 4) {
                            return 'color4'
                        }
                        if(val.kpi_seq == 5) {
                            return 'color5'
                        }
                        if(val.kpi_seq == 6) {
                            return 'color6'
                        }
                        if(val.kpi_seq == 7) {
                            return 'color7'
                        }
                        if(val.kpi_seq == 8) {
                            return 'color8'
                        }
                        if(val.kpi_seq == 9) {
                            return 'color9'
                        }
                    }
                }
            },

css

.color1 {
    background-color:#4babc5 !important;
}
.color2 {
    background-color: #4d7db8 !important;
}
.color3 {
    background-color: #1f487b !important;
}
.color4 {
    background-color: #7e629f !important;
}
.color5 {
    background-color: #d99593 !important;
}
.color6 {
    background-color: #963634 !important;
}
.color7 {
    background-color: #e26b0a !important;
}
.color8 {
    background-color: #74913b !important;
}
.color9 {
    background-color: #a5a5a5 !important;
}