先看效果图
<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>