给循环里的属性前三个加不同的样式

<template>
    <view class="search-hot">
        <view class="search-hot-title" v-show="hotWord.length > 0">热词</view>
        <view class="search-hot-list">
            <view
                class="search-hot-list-item"
                v-for="(item, index) in hotWord"
                :key="index"
                @click="clickHot(item, index)"
                :class="[activeIndex == index ? 'active' : '']"
            >
                <span class="sort-style" :class="[`background_${item.sort > 4 ? 4 : item.sort}`]">{{ item.sort }}</span>
                {{ item.keyword }}
            </view>
        </view>
    </view>
</template>
<script>
// searchKeyword
export default {
    name: "hot-search",

    data() {
        return {
            hotWord: [],
            activeIndex: 0,
        };
    },
    created() {
        this.hotSearch();
    },
    methods: {
        clickHot(item, index) {
            this.activeIndex = index;
            this.$emit("searchHot", item);
        },
        hotSearch() {
            this.$d.api.market.getKeyWords().then(res => {
                console.log(res, "res");
                this.hotWord = res;
            });
        },
    },
};
</script>

<style scoped lang="scss">
.search-hot {
    // flex: 1;
    padding: 29rpx;
    display: flex;
    flex-direction: column;
    background: #fff;

    &-title {
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        font-size: 25rpx;
        color: $d-main-color;
        line-height: 36rpx;
    }

    &-list {
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;

        &-item {
            background: #eef0f5;
            border-radius: 7rpx;
            padding: 18rpx;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 25rpx;
            color: $d-main-color;
            line-height: 36rpx;
            margin-right: 18rpx;
            margin-top: 18rpx;
            display: flex;
            justify-content: center;
            align-items: center;
            &:last-child {
                margin-right: 0;
            }
            .sort-style {
                padding: 0 3px;
                color: #ffffff;
                display: inline-block;
                margin: 0 5px;
                height: 13px;
                line-height: 13px;
                font-size: 10px;
            }
            .background_1 {
                background: green;
            }
            .background_2 {
                background: blue;
            }
            .background_3 {
                background: #f76560;
            }
            .background_4 {
                background: #ccc;
            }
        }
    }
}
</style>

通过添加动态样式去控制前三个元素的不同样式，第四个样式以后走一个默认样式 

 :class="[`background_${item.sort > 4 ? 4 : item.sort}`]"

 .background_1 {
                background: green;
            }
            .background_2 {
                background: blue;
            }
            .background_3 {
                background: #f76560;
            }
            .background_4 {
                background: #ccc;
            }