uni-app中點擊相應按鈕變色，其他按鈕則不變色

需求：初始化高亮第一個按鈕，然后點擊其他按鈕時，點擊的按鈕變色，未點擊的以及曾點擊過的按鈕則恢復成未點擊的顏色

 

由於第一個按鈕是獨立寫的，不在遍歷內，所以要單獨寫判斷，這里我用的Sum這個，代碼中就不細寫

<button  :class="active == Sum ? 'active':'anliu'"   type="default"  @click="all()"><view class="yonghu">總用戶</br>{{Sum}}</view></button>
                        <view  v-for="(item, index) in sequList"  :key="index" >
                            <button :class="active == item ? 'active':'anliu'"   type="default"   @click="sequ(item,index)"><view class="yonghu1">{{item.communityName}}</br>{{item.sum}}戶</view></button>
                        </view>

data() {
            return {
                active:'',
            }
}

// 總社區
            all(){
                // console.log('總');
             //    console.log(this.Sum);
                this.active = this.Sum;
                
                    var tid=this.sequList[0].communityParentId ;
                    // console.log(tid);
                    // 請求到所有數據
                    ajax.getshequuser({
                        userId: this.userId,
                        
                        communityId:tid
                    }).then(res => {
                        // this.manageManBack(res);
                        console.log(res)
                        // console.log(res.data);
                        this.manageManBack(res);
                        uni.showToast({
                            title: '當前顯示為全部用戶列表!',
                            icon: 'none',
                        })
                    })
                
                
                
            },
            // 社區按鈕
            sequ(item,index){
                
                // console.log(item,index);
                this.active = item;
                // 社區id
                this.sequId=item.communityId;
                ajax.getshequuser({
                    userId: this.userId,
                    // communityId: cId
                    communityId:this.sequId
                }).then(res => {
                    this.manageManBack(res);
                    // this.disabledA=false;
                    console.log(res);
                    uni.showToast({
                        title: '當前顯示為'+item.communityName+'列表!',
                        icon: 'none',
                    })
                })
            },

.anliu{
        width: 165upx;
        height: 145upx;
        background:#f84201 ;
        float: left;
        margin-left: 18upx;
        margin-bottom: 10upx;
        margin-top: 20upx;
        font-size: 24upx;
        color: #ffffff;
        line-height:40upx;
        
    }
.active {
     
     width: 165upx;
     height: 145upx;
     background-color: #aa0000;
     float: left;
     margin-left: 18upx;
     margin-bottom: 10upx;
     margin-top: 20upx;
     font-size: 24upx;
     color: #FFFFFF;
     line-height:40upx;
     }

初始化的時候第一個總計按鈕高亮的話，則直接將該方法在初始化時調用即可