vue在v-for中根据index和其他数据同时决定item的css样式

css对应多种状态

无选中一种状态，无加粗，字体小

打开筛选器一种状态，加粗，字体最大

非打开筛选器一种状态，加粗，字体适中

因为class不能对应method直接传值，只能通过表达式来实现css的选择，具体参考

https://cn.vuejs.org/v2/guide/class-and-style.html 

但是这里既要根据index的值，也要根据筛选器中选择的值来确定css的状态，所以我们必须要把index传到方法里去计算，常规的方法不可以，但是我们可以定义css数组

然后再数组中定义method，传如index，然后再medthod返回对应的css名称即可

 

如下所示：

<view class="row h-bt v-ct navigat">
                <view
                    v-for="(item, index) in typeList"
                    :key="index"
                    @tap="changeTypeHandler(index)"
                    :class="selectedIndex == index ? ['grow', 'align', 'selected', 'row', 'v-ct'] : ['grow', 'align', hasValueClass(index), 'row', 'v-ct']"
                >
                    <view>{{ item }}</view>
                    <view class="triangle"></view>
                </view>
                <!-- <view class="search row h-end v-ct grow2"><icon type="search" color="#fff" @tap="searchHandler" /></view> -->
            </view>





methods: {
        hasValueClass: function(index) {
            //检测index对应的数组是否有选中的值
            console.log('index=', index, 'indexMatchList=', this.isIndexMatchList(index));
            if(this.isIndexMatchList(index)){
                return 'hasValue';
            }else{
                return '';
            }
            // return{hasValue: this.isIndexMatchList(index)}
        },
        isIndexMatchList: function(index) {
            //index是否与选中的选项匹配
            switch (index) {
                case 0:
                    return this.selectedOrderTypeList.length > 0;
                    break;
                case 1:
                    return this.selectedOrderStatusList.length > 0;
                    break;
                case 2:
                    return this.selectedWorkZone.length > 0;
                    break;
                default:
                    return false;
            }
        }
}



.navigat {
        color: #ffffff;
        font-size: 30upx;
        font-weight: 300;
        margin-top: 30upx;
        .grow {
            flex-grow: 1;
        }
        .grow2 {
            flex-grow: 2;
        }
        .align {
            text-align: center;
        }
        .selected {
            font-size: 36upx;
            font-weight: bold;
        }
        .hasValue {
            font-size: 30upx;
            font-weight: bold;
        }
        .triangle {
            border: 12upx solid rgba($color: #000000, $alpha: 0);
            border-top: 12upx solid #ffffff;
            margin: 12upx 0 0 12upx;
        }
    }