关于Vue动态绑定样式的几种方式

Posted 2020-11-25 linck

一、按钮数组，选中时，样式改变（小程序 + 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;
}