一、按钮数组，选中时，样式改变（小程序 + vant weapp ,其他的按照需求改改便好）
1.Template：
<view v-for="(item, index) in size" :key="index" class="standard-button-single">
<van-button :color="active == index ? ‘#EC792F‘:‘#EEEFF0‘" :custom-class="active == index ? ‘havaSelect‘:‘standard-button‘" @click="toSelectStander(index)">{{ item }}</van-button>
</view>
2.data：
data() {
return {
activeClass: -1, // 0为默认选择第一个，-1为不选择
};
},
3.methods:
toSelectStander(index) {
this.active = index
},
4.样式（涉及到vue的样式穿透）
.standard-button-single {
/deep/.standard-button {
color: #808080 !important;
border-radius: 10rpx;
height: 62rpx;
padding: 0 10rpx;
margin-right: 14rpx;
}
/deep/.havaSelect {
border-radius: 10rpx;
height: 62rpx;
padding: 0 10rpx;
margin-right: 14rpx;
}
}
二、正常样式绑定（使用class和style两种方法，如果只是改单一的样式属性，建议style就好）
1.Template：
<text :class="[!isPackage ? ‘text-color-select‘ : ‘text-color‘]" @click="clikeText(1)">臻选单品</text>
<text class="textCenter">|</text>
<text :style="{ color: isPackage ? ‘#000000‘ : ‘#808080‘ }" @click="clikeText(2)">整装套餐</text>
2.样式
.text-color {
color: #808080;
}
.text-color-select {
color: #000000;
}
原文地址：https://www.cnblogs.com/linck/p/12334195.html