颜色配值

<template>
    <div>
        <div class="demo" v-for="(item,index) in lastArr" :key="index">
            <div :style="{background:item.bg1}">顶部</div>
            <div :style="{background:item.conbg}">内容</div>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            // 配置red必须配置green 依次内推
            peiduiarr: [
                { bg1: "red", bg2: "green" },
                { bg1: "pink", bg2: "red" },
                { bg1: "#ccc", bg2: "#a2a2a1" },
                { bg1: "#cfc2c3", bg2: "#dadada" }
            ],
            // 后端返回来的数据
            arrData: [
                { bg1: "red" },
                { bg1: "#cfc2c3" },
                { bg1: "#ccc" },
                { bg1: "pink" },
                { bg1: "red" },
                { bg1: "#cfc2c3" },
                { bg1: "#ccc" },
                { bg1: "pink" },
            ],
            lastArr: []
        }
    },
    mounted() {
        for (let i in this.arrData) { //第一次循环后端数据
            for (let k in this.peiduiarr) {//第二次数 配置项数据
                if (this.peiduiarr[k].bg1 == this.arrData[i].bg1) {
                    //给数组对象添加一个新增key值，表示内容颜色
                    this.arrData[i]['conbg'] = this.peiduiarr[k].bg2;
                }
            }
        }
        window.console.log(this.arrData)
        this.lastArr = this.arrData;
    }
}
</script>
<style lang="scss" scoped>
.demo {
    border: 1px solid red;
    margin-bottom: 20px;
    width: 200px;
}
</style>