Vue 项目 页面主题颜色，字体颜色由后台返回数据控制

**

需求：

**
同一个页面，可以根据后台返回的颜色值，改变页面的色调

方式

无需多言 直接上代码

<template>
    <div class="theme" :style="colorProps">
        <div class="btn">
            <div class="class1">我的字体颜色是红色的</div>
        </div>
        <div class="btn">
            <div class="class2">我的背景颜色是红色的</div>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            changeColor: '#ff0000' // 后台返回的色值
        }
    },
    computed: {
        colorProps() {
           return {
               'moveColor': this.changeColor
           }
        }
    }
}
</script>
<style lang="less" scoped>
.theme{
    width: 100%;
    height: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
    .class1 {
	 	color: var(moveColor);
	}
	.class2 {
	 	background-color: var(moveColor);
	}
   
  
}
</style>