vue.js 点击时改变样式
:class动态绑定样式表中.changeStyle的样式,将当前索引传递给changeSelectStyle
@click点击事件触发函数changeStyle(),并将当前索引传递进去。
<view @click="orderList(0)" style="width: 25%;display: flex;">
<text :class="{changeStyle:changeSelectStyle == 0}" @click="changeStyle(0)">待上门</text>
<view style="width: 1px;height: 52rpx;background-color: #a5a5a5;margin-left: 14rpx;"></view>
</view>
data(){return{
changeSelectStyle:''
}
}
样式:
.changeStyle{
font-size: 40rpx;
font-weight: 700;
}
changeStyle方法:让changeSelectStyle的值为当前索引的值
changeStyle(index){
this.changeSelectStyle = index;
}