uni中循环出来一个列表修改前三个序号为图片

img


怎么样可以修改序号为12345678这样,
修改后123怎么替换成图中这样的图片,

<template>
    <view class="inv-h-box">
        <view class="inv-h-w">
            <view :class="['inv-h',Inv==0?'inv-h-se':'']" @click="Inv=0">增效</view>
            <view :class="['inv-h',Inv==1?'inv-h-se':'']" @click="Inv=1">人效</view>
            <view :class="['inv-h',Inv==2?'inv-h-se':'']" @click="Inv=2">平效</view>
        </view>
        <view class="store_container" v-show="Inv == 0">
            <view class="store_list">
                <view class="uni-list">
                    <view class="uni-lista" @tap="go">
                        <view class="uni-listb">
                            <view class="uni-list-cell" hover-class="uni-list-cell-hover" v-for="(item,index) in list"
                                :key="index">
                                <view class="uni-list-cell-navigate uni-navigate-right">
                                    <text>{{item}}</text>//序号
                                    <text class="t2">{{list}}</text>//内容
                                    <text class="t3">{{item}}<text>%</text></text>//右侧%内容
                                    <image src="../../static/back.png"></image>//右侧箭头图片
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
        <view class="" v-show="Inv == 1">

        </view>
        <view class="" v-show="Inv == 2">

        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                Inv: 0,
                list: [1, 2, 3, 4, 5, 6, 7, 8, 9, ],
            }
        },
        methods: {
            changeTab(Inv) {
                that.navIdx = Inv;

            },

            go() {
                uni.navigateTo({
                    url: "/pages/gonglao/gonglao"
                })
            }
        }
    }
</script>

<style>
    .inv-h-box {
        background-color: #F6FBFE;
        padding-bottom: 20rpx;
    }

    .inv-h-w {
        height: 100upx;
        display: flex;
        padding-bottom: 20rpx;
    }

    .inv-h {
        font-size: 30rpx;
        flex: 1;
        text-align: center;
        color: #666666;
        height: 100upx;
        line-height: 100upx;
        position: relative;
    }

    .inv-h-se {
        font-size: 30rpx;
        font-family: PingFang SC;
        color: #2BE0DE;
    }

    .inv-h-se:after {
        content: '';
        position: absolute;
        bottom: 7rpx;
        top: auto;
        left: 42%;
        height: 4rpx;
        width: 44rpx;
        background-color: #2BE0DE;
    }

    page {
        background-color: #F2F2F2;
    }

    .uni-lista {
        width: 90%;
        margin: auto;
        background-color: #FFFFFF;
        border-radius: 20rpx;
    }

    .t2 {
        display: inline-block;
        width: 90%;
        height: 120rpx;
        margin-left: 40rpx;
        text-align: justify;
        text-justify: newspaper;
        word-break: break-all;
    }

    .t3 {
        color: #FF5700;
        font-size: 24rpx;
        margin-right: 20rpx;
    }

    .uni-listb {
        width: 90%;
        margin: auto;

    }

    image {
        width: 25rpx;
        height: 25rpx;
    }

    .uni-list-cell-navigate {
        width: 100%;
        height: 120rpx;
        line-height: 120rpx;
        border-bottom: 1px solid #ebe3e6;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
</style>



序号那里先判断item值,等于1-2-3时分别显示图片,其他直接item