vant组件Grid宫格点击后改变背景色 | js控制css样式(非添加类名) css变量

html:

<van-grid-item text=""  bindtap="onClick"  style="--color--:{{color}}"/>

css:

.van-grid-item text{

//选择用这个类是因为我直接在这里写background-color:#f0f0f0;是有效的，你可以根据自己的实际情况去选择有效的类

    height: 75rpx;

    line-height: 75rpx;

    width: 150rpx;

    text-align: center;

    background-color:var(--color--);

}

js:

data: {    

        color: ""

},

onClick(event){

            this.setData({

                color: "#f0f0f0;"

            })

}

再次点击后取消变色的功能，看懂了上面的就可以自己写了。

参考文章：

微信小程序--wxss中变量的使用_wxss 变量_海轰Pro的博客-CSDN博客