VUE实现按钮点击切换颜色

首先设置参数初始值

mapStyle:'background:rgba(255,97,44,1);color:rgba(255,255,255,1);',
normalStyle:'',
choseValue:'',

首先根据条件判断 style="choseValue == 'choseone'?mapStyle:normalStyle" 一个样式，然后 data-index="choseone" 一个值，

<view class="custom-kind" @tap="choose">
        <view class="custom-one" :style="choseValue == 'choseone'?mapStyle:normalStyle"  data-index="choseone" >优质 35</view>
        <view class="custom-one" :style="choseValue == 'chosetwo'?mapStyle:normalStyle"  data-index="chosetwo" >待维护 25848</view>
        <view class="custom-one" :style="choseValue == 'chosethree'?mapStyle:normalStyle"  data-index="chosethree" >无感知 48</view>
    </view>

点击时根据e.target.dataset.index获取 data-index的值，然后将值存入this.choseValue ，style就会动态判断显示哪一个样式

export default {
        data() {
            return {
                    mapStyle:'background:rgba(255,97,44,1);color:rgba(255,255,255,1);',
                normalStyle:'',
                choseValue:'',
            }
        },
        methods: {
            choose(e){
                let value = e.target.dataset.index
                this.choseValue = value;
                this.$emit("choose",value);
                
            }
        }
    }

完整事例：

<template>
    <view class="custom-kind" @tap="choose">
        <view class="custom-one" :style="choseValue == 'choseone'?mapStyle:normalStyle"  data-index="choseone" ref="choseone" value="choseone">优质 35</view>
        <view class="custom-one" :style="choseValue == 'chosetwo'?mapStyle:normalStyle" data-index="chosetwo"   ref="chosetwo" value="chosetwo">待维护 25848</view>
        <view class="custom-one" :style="choseValue == 'chosethree'?mapStyle:normalStyle"  data-index="chosethree" ref="chosethree" value="chosethree">无感知 48</view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                mapStyle:'background:rgba(255,97,44,1);color:rgba(255,255,255,1);',
                normalStyle:'',
                choseValue:'',
            }
        },
        methods: {
            choose(e){
                let value = e.target.dataset.index
                this.choseValue = value;
                this.$emit("choose",value);
                
            }
        }
    }
</script>

<style>
.custom-kind{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 54rpx 44rpx 0 44rpx;
    padding-bottom: 42rpx;
}
.custom-one{
    background:rgba(255,241,240,1);
    border-radius:8rpx;
    font-size:28rpx;
    font-family:PingFangSC-Regular,PingFang SC;
    font-weight:400;
    color:rgba(255,97,44,1);
    padding: 10rpx 28rpx 10rpx 28rpx;
}
.active{
    background:rgba(255,97,44,1);
    color:rgba(255,255,255,1);
}
</style>