關於Vue動態綁定樣式的幾種方式

一、按鈕數組，選中時，樣式改變（小程序 + 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;
}