css实现序号的编写

关键:定义class=“my”
在需要序号的地方定义 class=“num”
然后主要的是css样式

<template>
	<div  class="my">
		<!-- 主题 -->
		<div class="contant">
			<ul>
				<ol class="msg" v-for="item in items" :key="item.id">
					<div class="flex">
						<div class="num">{{item.nickname}}</div>
						<div>等级:VIP{{item.level}}</div>
					</div>
					<div class="flex">
						<div>用户状态:<span class="ys2" v-if="item.isActive == false">未激活</span>
							<span class="ys2" v-else-if="item.isActive == true">已激活</span></div>
						<div class="ys" @click="lowerLevel(item.mobile,item.nickname)">查看下级</div>
					</div>
				</ol>
			</ul>
		</div>
	</div>
</template>
<style scoped>
	.my {
		counter-reset: index;
	}
	.my .num:before {
		content: counter(index);
		counter-increment: index;
	}
</style>

你可能感兴趣的:(css)