uni-app动态改变class问题

j j

j j

你倒是把代码贴出来啊

<template>  
    <view>  
        <van-goods-action>  
            <van-goods-action-icon open-type="contact" icon="chat-o" text="客服" />  
            <van-goods-action-icon url="/pages/shoppingCart/shoppingCart" icon="cart-o" text="购物车" :info="shopping.num" />  
            <van-goods-action-button :disabled="shopping.isDidden" :text="shopping.text" type="warning" @click="shopping.isShow=true" />  
            <van-goods-action-button text="立即购买" bind:click="onClickButton" />  
        </van-goods-action>  

        <!-- 加入购物车弹出层 -->  
        <van-popup round :show="shopping.isShow" position="bottom" @close="shopping.isShow=false" custom-style="height: 70%;padding:20rpx">  
            <view style="display: flex;padding: 30rpx;align-items: center;">  
                <image mode="widthFix" style="width: 150rpx;height: 150rpx;" :src="commdity.commdityThnmbnail | getImg"></image>  
                <view style="margin-left: 20rpx;">  
                    <view style="font-size: 30rpx;">{{commdity.commdityName}}</view>  
                    <view style="color: #ed4014;margin-top: 5rpx;"><text style="font-size: 20rpx;">￥</text><text style="font-size: 60rpx;">{{commdity.commdityPrice}}</text></view>  
                </view>  
            </view>  

            <view class="commodityClassBox">  
                <view :key="index" @click="selectClass(index)" :class="['commodityClsss',isSelectClass===index?'active':'']" v-for="(item,index) in commdityClass">  
                    {{item.specName}}  
                </view>  
            </view>  
            <van-divider />  

            <van-cell-group>  
                <van-cell title="购买数量" :border="false">  
                    <van-stepper :value="shopping.count" />  
                </van-cell>  
            </van-cell-group>  

            <van-button type="danger" round block>加入购物车</van-button>  

            </van-grid>  
        </van-popup>  
    </view>  
</template>  

<script>  
    import post from '../post.js'  

    export default {  
        props: {  
            commdityId: {  
                type: Number,  
                required: true  
            }  
        },  
        data() {  
            return {  
                shopping: {  
                    num: 0,  
                    /* 内容 */  
                    list: [],  
                    /* 是否展示加入购物车具体内容 */  
                    isShow: false,  
                    /* 是否禁用加入购物车按钮 */  
                    isDidden: false,  
                    /* 加入购物车按钮字样 */  
                    text: '加入购物车',  
                    /* 加入购物车数量 */  
                    count: 1  
                },  
                commdity: {},  
                commdityClass: [],  
                /* 当前选中那个class */  
                isSelectClass: ''  
            }  
        },  
        methods: {  
            selectClass(index) {  
                this.isSelectClass = index;  
            }  
        },  
        watch: {  
            commdityId(newValue) {  
                post.gets({  
                    url: `/cart/${uni.getStorageSync('login').userId}/cartAll`,  
                    data: {  
                        page: 1,  
                        rows: 9999  
                    }  
                }).then(data => {  
                    this.shopping.list = data.data.cartList;  
                    this.shopping.num = data.data.cartList.length;  

                    this.shopping.list.forEach(item => {  
                        if (item.commdityId === this.commdityId) {  
                            Reflect.set(this.shopping, 'text', '已加入购物车');  
                            Reflect.set(this.shopping, 'isDidden', true);  
                        }  
                    })  
                    console.log('购物车内容', this.shopping.list);  
                })  

                /* 获取具体的商品 */  
                post.gets({  
                    url: `/commdity/${newValue}/searchInfo`,  
                    data: {  
                        userId: uni.getStorageSync('login').userId  
                    }  
                }).then(data => {  
                    this.commdity = data.data.commdityInfo;  
                    this.commdityClass = JSON.parse(this.commdity.commdityClass).map(item => {  
                        return item;  
                    });  
                    console.log('商品规格', this.commdityClass);  
                    console.log(this.commdity);  
                })  
            }  
        }  
    }  
</script>  

<style scoped>  
    .commodityClassBox {  
        display: flex;  
        align-items: center;  
        flex-wrap: wrap;  
    }  

    .commodityClassBox .commodityClsss {  
        font-size: 15rpx;  
        border: 1rpx solid #ed4014;  
        border-radius: 20rpx;  
        padding: 10rpx;  
        width: 25%;  
        margin: 10rpx 0 0 10rpx;  
        text-align: center;  
    }  

    .commodityClsss .active {  
        color: #fff;  
        background: #ed4014;  
    }  
</style>