uniapp切换背景色和字体颜色

uniapp不支持原生js的节点操作，应使用三元运算符代码如下：

一、建议使用

<template>
    <view>
        <view>
            <u-row justify="center" gutter="24" customStyle="margin-bottom: 10px;fontSize:20px">
                <u-col  :style="{height:60+'px',backgroundColor:flage?'#00a49b':'#cdedea',color:flage?'#ffffff':'#43c5a9'}" :span="6"
                    align="center" justify="center" @tap="tabColor('1')" textAlign="left">        
                    本月统计：12560
                </u-col>
                <u-col :span="6" :style="{height:60+'px',backgroundColor:flageB?'#00a49b':'#cdedea',color:flageB?'#ffffff':'#43c5a9'}" 
                    align="center" justify="center" @tap="tabColor('2')" textAlign="left">
                   上月统计：10160
                </u-col>
            </u-row>

        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                title: 'Hello',
                backG:'#cdedea',
                backGB:'#00a49b',
                flage:true,
                flageB:true,
            }
        },
        onLoad() {
     this.tabColor(1)
        },
        methods: {
            tabColor(key){
                if(key=='1'){
                    this.flage =false;
                    this.flageB= true;
                }else{
                    this.flageB =false;
                    this.flage= true;
                }
            }

二、没有使用组件开发时可以使用$refs,使用了某些组件真机不支持

//             tabColor(key) {
//                 const that = this;
//                 that.$refs.backG.$el.style.backgroundColor="";
//                 that.$refs.backG.$el.style.color = "";
//                that.$refs.backGB.$el.style.backgroundColor = "";
//                 that.$refs.backGB.$el.style.color = "";
//                 if (key == 1) {
//                     that.$refs.backG.$el.style.backgroundColor = "#cdedea";
//                     that.$refs.backG.$el.style.color = "#43c5a9";

//                     that.$refs.backGB.$el.style.backgroundColor = "#00a49b";
//                     that.$refs.backGB.$el.style.color = "#ffffff";
//                 }else{
//                     that.$refs.backGB.$el.style.backgroundColor = "#cdedea";
//                     that.$refs.backGB.$el.style.color = "#43c5a9";
//                     that.$refs.backG.$el.style.backgroundColor = "#00a49b";
//                     that.$refs.backG.$el.style.color = "#ffffff";
//                 }
// }

 三、原生js(真机运行不支持)

                // tabColor(key) {
                //     var bt1 = document.getElementById('backG');
                //     var bt2 = document.getElementById('backGB');
                //     bt1.style.backgroundColor = "";
                //     bt1.style.color = "";
                //     bt2.style.backgroundColor = "";
                //     bt2.style.color = "";
                //     if (key == 1) {
                //         bt1.style.backgroundColor = "#cdedea";
                //         bt1.style.color = "#43c5a9";
                //         bt2.style.backgroundColor = "#00a49b";
                //         bt2.style.color = "#ffffff";
                //     } else {
                //         bt2.style.backgroundColor = "#cdedea";
                //         bt2.style.color = "#43c5a9";
                //         bt1.style.backgroundColor = "#00a49b";
                //         bt1.style.color = "#ffffff";
                //     }

                // }
            }
        }
</script>

<style>
    .content {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .logo {
        height: 200rpx;
        width: 200rpx;
        margin-top: 200rpx;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 50rpx;
    }

    .text-area {
        display: flex;
        justify-content: center;
    }

    .title {
        font-size: 36rpx;
        color: #8f8f94;
    }
</style>