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;
        }
    }