vue下拿数字当做背景图的方法

先看效果图

<template>
    <div class="app">
        <div class="list" v-for="item in 10" :key="item">
            <div class="item">我是{{item}}</div>
        </div>
    </div>
</template>

<script>
export default {};
</script>

<style lang="scss" scoped>
.app{
    display: flex;
}
.list {
    width: 100px;
    height: 100px;
    border: 1px solid #333;
    position: relative;
    &::before {
        content: "111";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        color: #ccc;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 40px;
        z-index: 1;
    }
    .item {
        position: relative;
        z-index: 2;
        text-align: center;
        line-height: 100px;
        font-size: 14px;
        color: #000;
    }
}
</style>

如果想数字背景随着数字而变化则需要改动一下

<template>
    <div class="app">
        <div
            :class="['list', updateNum(key)]"
            v-for="key in 10"
            :key="key"
            ref="numRef"
        >
            <div class="item">我是{{ key }}</div>
        </div>
    </div>
</template>

<script>
export default {
    methods: {
        updateNum(key) {
            this.$nextTick(() => {
                this.$refs.numRef[key - 1].setAttribute("data-num", key);
            });
        },
    },
};
</script>

<style lang="scss" scoped>
.app {
    display: flex;
}
.list {
    width: 100px;
    height: 100px;
    border: 1px solid #333;
    position: relative;
    &::before {
        content: attr(data-num);
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        color: #ccc;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 40px;
        z-index: 1;
    }
    .item {
        position: relative;
        z-index: 2;
        text-align: center;
        line-height: 100px;
        font-size: 14px;
        color: #000;
    }
}
</style>