淘宝 购买商品 选择参数 选中的有样式 怎么实现的 uniapp

Question

<!-- 渲染参数数据 -->
                            <view class="select-view-center">
                                <view class="tab" v-for="(value,item,index) in data" @click="click(index)">
                                    <text>{{item}}</text>
                                    <view class="select-view-center-tabs">
                                        <!-- :class="selectIndex[0]===index&&selectIndex[1]===i?'select-tabs':'select-view-center-tabs-text'" -->
                                        <text class="select-view-center-tabs-text"  @click="dataClick([index,i])" v-for="(v,i) in value">{{v}}</text>
                                    </view>
                                </view>
                            </view>

                data: {
                    "颜色": ["白色", "银色", "黑色"],
                    "尺寸": ["20寸", "24寸", "28寸"],
                },

dataClick(index) {        
    if(this.selectIndex.length===0 || this.selectIndex[0][0]!=index[0]){
        this.selectIndex.push(index)
                }else if(this.selectIndex[0][0]===index[0]){
                    this.selectIndex.splice(0,1)
                    this.selectIndex.push(index)
                }
                console.log(this.selectIndex)
            },

是二维数组动态生成的
想实现的效果：颜色和尺寸分别只能选中一个
不知道该怎么实现
点击事件 可以用数组分别存下点击的两个view的下标 [index,i] 但是，class怎么根据下标改啊，还是思路不对，实现不了啊

Answer 1

:class="{'li-focus' : chooseNum==index}"，样式上面肯定要动态绑定class,将点击事件的下标赋值给chooseNum，就实现单选了