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>

vue.js 点击时改变样式


 data(){

    return{

      changeSelectStyle:''

  }

}

样式:

    .changeStyle{
        font-size: 40rpx;
        font-weight: 700;
    }

changeStyle方法:让changeSelectStyle的值为当前索引的值

           changeStyle(index){
                 this.changeSelectStyle = index;
            }  

vue.js 点击时改变样式

参考:https://blog.****.net/weixin_39089928/article/details/88293404?utm_medium=distribute.pc_aggpage_search_result.none-task-blog-2~all~first_rank_v2~rank_v25-8-88293404.nonecase&utm_term=点击改变样式